To pass props dynamically, you can add the v-bind directive to your dynamic component and pass an object containing your prop names and values: So your dynamic component would look like this: <component :is=”currentComponent” v-bind=”currentProperties”></component> And in your Vue instance, currentProperties can change based on the current component: data: function () { return { currentComponent: … Read more
Problem [Vue warn]: Property or method “changeSetting” is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in <MainTable>) The error is occurring because the changeSetting method is being referenced in the MainTable component here: “<button @click=’changeSetting(index)’> Info </button>” + However the changeSetting … Read more
It’s all about Timing nextTick allows you to execute code after you have changed some data and Vue.js has updated the virtual DOM based on your data change, but before the browser has rendered that change on the page. Normally, devs use the native JavaScript function setTimeout to achieve similar behavior, but using setTimeout relinquishes … Read more
This is a known use case. There are different solutions. For example, one can use vuex-persistedstate. This is a plugin for vuex to handle and store state between page refreshes. Sample code: import { Store } from ‘vuex’ import createPersistedState from ‘vuex-persistedstate’ import * as Cookies from ‘js-cookie’ const store = new Store({ // … … Read more
actions in Vuex are asynchronous. The only way to let the calling function (initiator of action) to know that an action is complete – is by returning a Promise and resolving it later. Here is an example: myAction returns a Promise, makes a http call and resolves or rejects the Promise later – all asynchronously … Read more
Each component has a unique id which can be accessed as this._uid. <template> <div> <label :for=”id”>Label text for {{id}}</label> <input :id=”id” type=”text” /> </div> </template> <script> export default { data () { return { id: null } }, mounted () { this.id = this._uid } } </script> If you want more control over the ids … Read more
If you’re going to v-model a computed, it needs a setter. Whatever you want it to do with the updated value (probably write it to the $store, considering that’s what your getter pulls it from) you do in the setter. If writing it back to the store happens via form submission, you don’t want to … Read more
On Vue 2.3 and above you can do this: <div v-on:click=”firstFunction(); secondFunction();”></div> // or <div @click=”firstFunction(); secondFunction();”></div>
With your code, the vue.js is trying to access the moment() method from its scope. Hence you should use a method like this: methods: { moment: function () { return moment(); } }, If you want to pass a date to the moment.js, I suggest to use filters: filters: { moment: function (date) { return … Read more
Update 09/17/2020: As this answer gets up-votes every day, I thought maybe it is worth diving deeper into this topic. Considering sass-lang website: Dart Sass is the primary implementation of Sass, which means it gets new features before any other implementation. It’s fast, easy to install, and it compiles to pure JavaScript which makes it … Read more