|
项目中，使用list存储列表的数据，通过v-for循环显示，代码如下：
<li v-for="(item,index) in list">
名字：pw_item.name价格：pw_item.price 状态：pw_item.state
<button @click="delFun(index)">删除</button>
<button @click="updateInfoFun(index)">修改</button>
</li>script代码，如下：
var vm = new Vue({
el:"#app",
data:{
username:"",
price:"",
state:"",
index:-1,
search:"",
list:[]
},在做修改功能时，修改了list的值后，页面确不能重新渲染，还是原来的值，但是打印this.list. 值却已经改变了。
查阅了资料，知道set方法，使用了set方法，页面就可以重新渲染 然后，使用了set方法，但是发现还是不能使用。代码如下： updateFun:function(){
var ob= new Object();
ob.name=this.username;
ob.price = this.price;
ob.state = this.state;
this.list[this.index] = ob;
//使用set更新值，页面会重新渲染
this.$set(this.$data,"list",this.list);
this.index = -1;
}
解决方案：最后，使用了以下两种方式，实现了页面的刷新 方法一：直接更新具体的对象 //方法一 this.$set(this.list[this.index],"name",this.username); this.$set(this.list[this.index],"price",this.price); this.$set(this.list[this.index],"state",this.state); 方法二： var list = [];
for(var i=0;i<this.list.length;i++){
if(i==this.index){
list.push(ob);
}else{
st.push(this.list<i>);
}
}
this.$set(this.$data,"list",list);</i>原因：
$set: 判断是否被修改，如果修改后，页面将重新渲染 注意：如果被修改的对象是引用类型，只修改内容，地址不变的话，是判断为没有改变，页面不会重新渲染，解决办法：把引用类型的里值遍历出来赋值给一个新的对象，在把新的对象赋值要改变的对象即可，代码，如上。 |
|
公众号
