I’m having trouble understanding how props work in VueJS, some help would be greatly appreciated. It is a simple google map component that I wish to show on the page and pass the id element of the div dynamically as a prop to the underlying template. html file – vue file – The error I get is that this.name is
Tag: vue.js
Resetting previous selection in VueJS
I have two custom select input fields in a form: Country and City. City is depended on the Country, as you may have already guessed. So when a user selects a country: an ajax call is performed the cities of that selected country are fetched fetched cities are displayed in the second selectbox Scenario: From the country selectbox, I selected
Throttle or debounce async calls in Vue 2 while passing arguments to debounced function
I have a Vue 2 application that uses an array of objects to back a search/multiselect widget provided by vue-multiselect. I have looked at the Vue 1 -> 2 migration guide on debouncing calls, but the example they give did not propagate the arguments from the DOM elements to the business logic. Right now the select fires change events with
change child-component checked state from parent-component synchronously fail
Please run the worked demo: however, if i change the synchronous operation to asynchronous operation in change which means change to the demo is not going work because checked in the check1 is not updated. My question is I don’t know why synchronous operation is not work! I guess there is a promise after the change to do the underlying
Vue.js event after condition element is rendered
I need event or some workaround how to access currently appended element with v-if in jQuery with $(“.myTarget”) if I use watch on showEl variable it triggers before element renders and I can’t access that element yet. How to achieve to be able to access .myTarget immediately after it renders? Answer Use $nextTick.
How is it possible to transition the position of items in a list without using transform or top/left
The other day I stumbled onto an example that uses Vue.js, but my question is more about the CSS and HTML that Vue uses to achieve the transition between states. The cards temporarily get the class .shuffleMedium-move which adds a transition: transform 1s and the order of the nodes change in the DOM, but I don’t understand why the transition
How to render .vue file in javascript when using ES5? (Trying to use webpack and vue-loader)
I have been trying to migrate a vue project and I unfortunately cannot use import/export in where I am building the application. Therefore, to simplify my problem, I created a project from scratch to build a vue component without the vue-cli. I have been successful to bring up the vue app with webpack before I created .vue files but after
Bind class to element depending on v-model in Vue.js
Trying to create dynamic table( link to Codepen) with Vue. Now i want to add class using :class to row when checkbox is checked. Every checkbox is bound with specific value in object of objects. There is no error or warning, it just not working. I would be glad to hear any idea about solving this problem. Answer this is
How to use Vuetify tabs with vue-router
I have the following jsfiddle that has two Vuetify tabs. The documentation doesn’t show examples on using vue-router with them. I found this Medium.com post on how to use Vuetify with vue-router, which has the following code: However, the code is now outdated as the Vuetify 1.0.13 Tabs documentation doesn’t specify a router prop in their api, so the embedded
How to avoid v-if on an element which uses v-for
I have a literal object like so: I was not aware that it was bad to use v-if inside a v-for loop and my first approach to display the code in the view was this: What I was trying to do is to avoid to display a div block related to the type property of the object MenuVoice. Since I