在网页加载时给json数据动态添加字段,导致在更改该值的时候无效操作

本文探讨了一位前端开发者遇到的问题,即在Vue实例中动态添加的数据字段无法正常改变其值。通过代码示例展示了四种不同的尝试方式,分析了不同情况下的行为。问题集中在动态添加的字段`select`的值改变与JSON对象同步的问题。总结了当仅使用`Vue`的响应式属性时,动态字段的值能够更新,而直接修改字段则可能导致问题。这为理解Vue的数据绑定和响应式原理提供了参考。
摘要由CSDN通过智能技术生成

问题虽然处理了,但目前自己的前端知识无法解释,欢迎各位大佬指教。
上代码:

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可以改变
问题总结:为什么动态增加的字段不可以改变字段的值?

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

蓝桉未与

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值