问题虽然处理了,但目前自己的前端知识无法解释,欢迎各位大佬指教。
上代码:
let info =new Vue({
el:"#user_info",
data:{
itemData:[{id: '1', value: '香蕉',hasSelected:false},
{id: '2', value: '苹果',hasSelected:false},
{id: '3', value: '梨子',hasSelected:false},
{id: '4', value: '葡萄',hasSelected:false}],
hasChecked:false
},
methods:{
//全选
hasCheckedAll:function(){
if(this.hasChecked){
this.itemData.forEach(element => {
element.hasSelected=true;
});
}else{
this.itemData.forEach(element => {
element.hasSelected=false;
});
}
},
hasClickSingle:function(index){
//第一句
//this.itemData[index]["hasSelected"]=!this.itemData[index].hasSelected;//不是动态增加的json字段可以改变
//第二句
this.itemData[index]["select"]=!this.itemData[index].select;
//第三句
//this.itemData[index]["value"]=!this.itemData[index].select;
//第四句
//this.itemData[index]["id"]=!this.itemData[index].select;
alert(this.itemData[index]["select"]);//可以随着select的改变而改变,但json中的select不变
},
//向json数据添加 select=false
addJsonValue:function(){
this.itemData.forEach(element => {
element['select']=false;
});
}
},
created(){
this.addJsonValue();//动态增加字段select
}
});
前提:value与hasSelected展现在网页上
问题描述:
1、当只有第二句时,select的值改变,但无法改变json中的值
2、有第二句与第三句时,json中的select可以改变
3、有第二句与第四句时,json中的select不可以改变
4、只有第一句时,json中的hasSelected可以改变
问题总结:为什么动态增加的字段不可以改变字段的值?