I'm currently working on my first Vue project and encountering an issue with triggering a child component within a table cell. Whenever I double click a cell, the `updated` event is being triggered in all child components associated with the table cells instead of just the one I clicked on.
My current approach involves passing props to the child component, which does work. However, the problem arises when multiple child components are activated unnecessarily due to the propagation of the `updated` event.
Screenshot
https://i.sstatic.net/CQjxX.png
Code and question
The code snippet below may not reflect the exact structure of my project but showcases the mentioned issue. Clicking on a button triggers actions for all cells rather than just the targeted cell:
While I understand why this happens - as each child component reacts to updated data from the parent - it's unnecessary for inactive child components to be triggered. How can I ensure that only the `updated` event of the clicked item is triggered?
Vue.component('v-child', {
props: ['item', 'active'],
updated() {
console.log('Clicked');
},
template: `
<div>
{{ item }} {{ active }}
</div>`
});
new Vue({
el: '#app',
data: {
active: 0,
items: {
first: '1',
second: '2',
third: '3',
a: 'a',
b: 'b',
c: 'c'
},
message: 'Hello Vue.js!'
},
methods: {
click(item) {
this.active = item;
console.log(this.active);
}
}
});li {
list-style: none;
margin-bottom: 1rem;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<li v-for="item in items">
<button v-on:click="click(item)">Button</button>
<v-child :item="item" :active="active"></v-child>
</li>
</div>