Give the child component a ref and use $refs to call a method on the child component directly. html: <div id=”app”> <child-component ref=”childComponent”></child-component> <button @click=”click”>Click</button> </div> javascript: var ChildComponent = { template: ‘<div>{{value}}</div>’, data: function () { return { value: 0 }; }, methods: { setValue: function(value) { this.value = value; } } } new … Read more
This has to do with the fact that mutating a prop locally is considered an anti-pattern in Vue 2 What you should do now, in case you want to mutate a prop locally, is to declare a field in your data that uses the props value as its initial value and then mutate the copy: … Read more
Let’s say, for example, that you have a basket of fruits, and each time you add or remove a fruit from the basket, you want to (1) display info about fruit count, but you also (2) want to be notified of the count of the fruits in some fancy fashion… fruit-count-component.vue <template> <!– We meet … 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
Most probably you want to use a method <span>{{ fullName(‘Hi’) }}</span> methods: { fullName(salut) { return `${salut} ${this.firstName} ${this.lastName}` } } Longer explanation Technically you can use a computed property with a parameter like this: computed: { fullName() { return salut => `${salut} ${this.firstName} ${this.lastName}` } } (Thanks Unirgy for the base code for this.) … 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