問(wèn)題描述
vue的data里邊聲明或者已經(jīng)賦值過(guò)的對(duì)象或者數(shù)組時(shí)，向?qū)ο笾刑砑有碌膶傩苑汤铮绻麓藢傩缘闹迪椭兀遣粫?huì)更新顯示視圖的。
解決方法
<template>
<div class="second-block" >
<ul class="list-ul">
<li class="list-li" v-for="(item,index) in list" :key="index" @click="updateListData(index)">
{{item.title}}
</li>
</ul>
</div>
</template>
<script>
export default{
data(){
return{
list:[
{
id : 1,
selected : true,
title : 'aaa',
newtitle : 'aaa1'
},
{
id : 2,
selected : false,
title : 'bbb',
newtitle : 'aaa2'
},
{
id : 3,
selected : true,
title : 'ccc',
newtitle : 'aaa3'
}
]
}
},
methods:{
updateListData(index){
console.log(index)
// 頁(yè)面未更新
this.list[index] = { //不響應(yīng)
id : 313,
selected : true,
title : 'ccc113',
newtitle : 'aaa33'
}
// 頁(yè)面更新
this.$set(this.list, index, { //響應(yīng)
id : 31,
selected : true,
title : 'ccc11',
newtitle : 'aaa3'
})
this.list.splice(index, 1, { //響應(yīng)
id : 31,
selected : true,
title : 'ccc11',
newtitle : 'aaa3'
})
this.list.length = 2; //不響應(yīng)
this.list.splice(2) //響應(yīng)
}
}
}
</script>
<style lang="less">
.second-block{
width: 100%;
height: 200px;
line-height: 200px;
text-align: center;
float: left;
}
ul li{
list-style-type: none;
}
.list-ul{
.list-li{
line-height: 48px;
}
.list-li:nth-child(2n){
background:#666666;
}
.list-li:nth-child(2n-1){
background:#e3e3e3;
}
}
</style>
