I am in the process of adding Vue.js to my Rails 6 app. The project is using turbolinks so “vue-turbolinks” is installed via yarn and my Vue config looks like this: and my rails template(.html.erb) contains a text field with a Vuejs “v-model” attribute Vue seems to be working as expected, except “v-model” is outputting literal function instead of calling
Tag: vue.js
Vue .sync only works with v-model, but gives mutation error
// NOTE: Issue was due to VueFormulate’s FormulaInput (custom input). Check the code sandbox for 3 working examples of .sync Usecase My app is injecting multiple dynamic components into a view which then binds multiple inputs within each component to data in the parent. Since v-model only works on a single value, I’ve found that .sync (added again after Vue
How to embed button with Vue code into cell inserted with insertCell()?
I have Vue component with a table with users data: The button in the last <td> successfully deletes worker from the table. Function toggleChildWorkers insert new rows with child workers and delete (hide, actually) them like this: As you can see, I’m trying to embed buttons in the new cells of inserted rows (blue ones). But they are not displayed
How to display an element in Vue component only after NProgress.done()
For displaying the loading status in a VueJS application I use the library NProgress. It works well and shows the loading bar and the spinning wheel. However the HTML content of the page is already rendered and displayed. I’d like to hide certain parts of the page while the request is running. Is there any possibility to check programmatically for
Array manipulation with multiple conditions – Vue.js / JavaScript
In my Vue.js application I use a navigation drawer to display the different pages a user has access to. Pages are also only visible if the administrator has activated the related module. Therefore the unique moduleID is set for each page and children. The list is populated by filteredPages[]. This array is the result of displaying only the pages a
Having a hard time changing background color in Vue js
I’m trying to make the background color of the landing page orange, but the issue is that what I currently have makes all the pages orange. I tried adding scoped to the landing page so it would style only that page, but when I do this, the entire page isn’t orange anymore. The end goal is to only affect the
Vue 3 i18n issue: The message format compilation is not supported in this build
vue & vue-i18n version ex: vue: 3.0.0.0 vue-i18n: 9.0.0-beta.15 Description I am probably doing something very wrong, however I would really appreciate some direction. I followed documentation from vue-i18n@next. Translation does not work and I get message in console: [intlify] The message format compilation is not supported in this build. Because message compiler isn’t included. You need to pre-compilation all
Render vue component in data
I trying to make custom tooltip for apexcharts like in example: https://apexcharts.com/docs/options/tooltip/# and it’s works, but when I set in return some vue component nothing shows. Why is this happening and how to fix it? Answer To make Vue render the component correctly, you’ll have to tell it to in the custom tooltip function: If you need data or other
Find/filter includes array by ids vue js
Hello guys i’ve tried to filter like this for result like this using filter and includes.. but not work, any solution using includes or something? i’ve tried like these but output justlike [] thanks guys Answer UPDATED:
Vuex Store Object Child returns undefined, parent returns properly. Why?
I’ve seen some similar questions but they don’t seem to match my situation. When I log this.$store.state.account I get the expected result However, when I console.log(this.$store.state.account.user) the user object disappears! All of the nested properties inside user return undefined though they log perfectly fine above console.log(this.$store.state.account.user) This is the method inside my component calling the object this is the action