You may want to add a :key attribute to <router-view> like so: <router-view :key=”$route.fullPath”></router-view> This way, Vue Router will reload the component once the path changes. Without the key, it won’t even notice that something has changed because the same component is being used (in your case, the Map component).
Both can be correct depending on your use case. The application I’m currently building uses both. When to use B: Go Directly to the server Use B if the data is very important to save. In this case you may want to go directly to the server and serve up the response to verify it … Read more
You could update the sub-property in the array element with this.$set(). For example, to increment an x subproperty in the first two array elements (creating the sub-property if it doesn’t exist): methods: { update() { this.$set(this.arr[0].foo, ‘x’, (this.arr[0].foo.x || 0) + 100) this.$set(this.arr[1].foo, ‘x’, (this.arr[1].foo.x || 0) + 100) } } new Vue({ el: ‘#app’, … Read more
So best way to accomplish to me would be to dispatch actions instead of committing the mutations. If you look at the methods in Vuex source, commit only executes with no return (so is a void) and dispatch returns the value you return from the action (which is a function) For my actions, i always … Read more
1. First of all I’d use a Vuex Module as this Login/Session behavior seems to be ideal for a Session module. After that (which is totally optional) you can set up a Getter to avoid accessing the state itself from outside Vuex, you’d would end up with something like this: state: { // bear in … Read more
Improved solution: use CSS custom properties and variables If you only intend to work with modern/evergreen browsers, then using CSS custom properties and variables is the way to go! You can actually pass CSS custom properties into the :style binding, e.g. computed: { styleObject: function() { return { ‘–color’: this.button.color, ‘–color-hover’: this.button.colorHover } } } … Read more
Try this code: routes: [ { path: “https://stackoverflow.com/”, redirect: ‘/defaultview’ }, { path: ‘/defaultview’, name: ‘defaultview’, component: DefaultView }, { path: ‘*’, component: NotFoundComponent } ]
Looking at the code on Github1, it looks like the customFilter prop is used to overwrite the default method used to determine how the filter prop is applied to the items in the table. The default customFilter method applies the filter function to each property name of each item object and filters out any items … Read more
A common mistake could be, parent component pass a variable as a prop which is null at the moment where child component get rendered. Thus when you access it in mounted in child component. You see it as a null value. And at a later time, in Parent component the variable which was passed (prop) … Read more
As the error is saying: The “data” option should be a function In the component, the data must be a function, you need to modify the data block to be a function which will return the data structure to be used in DOM in a reactive way: Vue.component(‘symbols-table’, { template: ‘<h1>Hello World</h1>’, data: function() { … Read more