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
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
Vue allows for you to specify a default prop value and type directly, by making props an object (see: https://vuejs.org/guide/components.html#Prop-Validation): props: { year: { default: 2016, type: Number } } If the wrong type is passed then it throws an error and logs it in the console, here’s the fiddle: https://jsfiddle.net/cexbqe2q/
When you declare: new Vue({ el: ‘#app’, data () { return {} } )} That is typically your root Vue instance that the rest of the application descends from. This hangs off the root element declared in an html document, for example: <html> … <body> <div id=”app”></div> </body> </html> The other syntax is declaring a … Read more
Two-way binding has been deprecated in Vue 2.0 in favor of using a more event-driven architecture. In general, a child should not mutate its props. Rather, it should $emit events and let the parent respond to those events. In your specific case, you could use a custom component with v-model. This is a special syntax … Read more
A simple and effective way to solve this, it’s by adding your external script into the vue mounted() of your component. I will illustrate you with the Google Recaptcha script: <template> …. your HTML </template> <script> export default { data: () => ({ ……data of your component }), mounted() { let recaptchaScript = document.createElement(‘script’) recaptchaScript.setAttribute(‘src’, … Read more
If you want to listen to a native event on the root element of a component, you have to use the .native modifier for v-on, like following: <template> <div id=”app”> <test v-on:click.native=”testFunction”></test> </div> </template> or in shorthand, as suggested in comment, you can as well do: <template> <div id=”app”> <test @click.native=”testFunction”></test> </div> </template> Reference to … Read more
You can watch props to execute some code upon props changes: new Vue({ el: ‘#app’, data: { text: ‘Hello’ }, components: { ‘child’ : { template: `<p>{{ myprop }}</p>`, props: [‘myprop’], watch: { myprop: function(newVal, oldVal) { // watch it console.log(‘Prop changed: ‘, newVal, ‘ | was: ‘, oldVal) } } } } }); <script … Read more
You can use a deep watcher for that: watch: { item: { handler(val){ // do stuff }, deep: true } } This will now detect any changes to the objects in the item array and additions to the array itself (when used with Vue.set). Here’s a JSFiddle: http://jsfiddle.net/je2rw3rs/ EDIT If you don’t want to watch … Read more