I have encountered an issue with data manipulation in my Vue component. When I click on a checkbox, changes in the generated data are not reflected. However, when I click a button that already has existing data, changes are made successfully. Can someone please explain why this happens? Is there a solution to this problem?
Below is the code snippet:
JavaScript
Vue.component('fighters', {
template: '#fighters-template',
data() {
return {
items: [
{ name: 'Ryu' },
{ name: 'Ken' },
{ name: 'Akuma' }
],
msg: 'hi'
}
},
methods: {
newData() {
this.items.forEach(item => {
item.id = Math.random().toString(36).substr(2, 9);
item.game = 'Street Figther';
item.show = false;
});
this.items.push()
},
greeting() {
this.msg = 'hola'
}
}
});
new Vue({
el: '#app'
})
HTML
<main id="app">
<fighters></fighters>
</main>
<template id="fighters-template">
<div class="o-container--sm u-my1">
<ul>
<li v-for="item in items">
<input type="checkbox" v-model="item.show">
{{ item.name }}</li>
</ul>
<button class="c-button c-button--primary" @click="newData()">New Data</button>
<h2>{{ msg }}</h2>
<button class="c-button c-button--primary" @click="greeting()">Greeting</button>
<hr>
<pre>{{ items }}</pre>
</div>
</template>
For live code demo, visit: https://jsfiddle.net/cqx12a00/1/
Appreciate any insights you can provide. Thank you!