I was just playing around with Vue.js and found a problem I cannot explain why it happens. Here is my MWE: Let me explain it a bit. There is a global data property texts that contains a few strings. For each of these strings, a custom component list-entry is generated. The strings are propagated using v-bind to these components. Upon
Tag: vue.js
[Vue warn]: Property or method “$v” is not defined
I wanted to make a validation on the match of passwords with the following error: vue.runtime.esm.js?2b0e:619 [Vue warn]: Property or method “$v” is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties. main.js My form Please help me
Use scrollIntoView() and scroll to the bottom of the selected element
I have a list of chat messages inside a div and want to scroll to the bottom each time an element is added. I tried calling a function that selects the last item and uses scrollIntoView(). The issue is that it scrolls to the top of the selected element and not to the bottom of it which is needed in
Get match range value from the array in vuejs
I have below types of array in my vue js. Now I want to find the value key value of match the range. So it’s fall in 25 range so my output should be 25. I tried below code but it always return all the range. Edit: My input is 5 and it’s fall between 0-25 so I want to
Is it possible to re-use a computed property by passing a parameter (Vuelidate)
I’m using Vuelidate for a form that has multiple sections. Each of these sections has formData object and name. Nested inside each of these is a ZIP object to validate zip code with numerous validations….required, numeric, minlength, and maxlength. What I would like to do is have ONE computed property zipCodeValid() and use on both. As of now I have
Vue.js disabled button with condition doesn’t work
I have a data-table in Vue.js component using Vuetify with a input inside a row, and I need to disable a button if the input v-model=”row.item.quantidade” was empty. but doesn’t work. HTML Javascript method in vue.js component Answer The function : should be a computed property and it must be used without () like :
vue-test-utils returns null for document.querySelector
I am writing unit tests for a Vue.js component that displays some radiobuttons and emits an event with the radio button id whenever a button is checked: ApplicationElement.vue: I wrote the following test for said component: ApplicationElement.spec.js: The test fails with: “TypeError: Cannot read property ‘id’ of null” If I remove the document.querySelector line from the chooseElement method in the
Display different video source according to screen size
I am trying to load different videos according to the screen size. I found a solution to doing this using javascript. However, I am not able to integrate this code into nuxt.js. Working Code: HTML JAVASCRIPT The Fiddle: https://jsfiddle.net/j78w36er/2/ I tried to integrate like this: I would be very thankful for any kind of help! Answer Your code is primarily
Passing dynamic boolean props to a VueJS component
How can I attach dynamic properties to a VueJS Component using VuetifyJS? I have the following VuetifyJS code example that creates a select field element: This creates a functional VuetifyJS select component, however I want to know how to pass the boolean props multiple, attach, chips to the select element as data properties so they do not have to be
Vuetify Data Table Expand Row on Column Click
I have a vuetify data table that includes expandable rows. The only real difference I have from the demo is that I would like the item.name column to open/close the expandable row just like the chevron icon. When I put an @click handler on the v-slot for that column I get the error Error in v-on handler: “TypeError: expand is