<div id="app">
<div class="wrap">
<button class="btn btn-outline-primary" @click="cantWork">修改陣列內部元素</button>
<ul>
<li v-for="(item, key) in arrayData" :key="item.age">
{{ key }} - {{ item.name }} {{ item.age }} 歲 <input type="text">
</li>
</ul>
</div>
</div>.size{
font-size: 30px;
font-weight: 600;
}
.wrap{
max-width: 400px;
margin-left:auto;
margin-right:auto;
text-align: center;
}
var app = new Vue({
el:'#app',
data:{
arrayData:[
{
name: '小明',
age: 16
},
{
name: '漂亮阿姨',
age: 24
},
{
name: '力宏',
age: 35
},
],
},
methods:{
cantWork:function(){
Vue.set(this.arrayData, 0, {
name:'賽亞人',
age:100
})
}
}
})