vue 多层对象数据更新视图不渲染问题

最新推荐文章于 2023-07-17 17:47:19 发布

原创

最新推荐文章于 2023-07-17 17:47:19 发布 · 939 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript

刚开始直接使用（根据下标来修改找到相对应位置修改数据；数据虽然修改成功了；但视图未修改）

setRowPath(){
        this.list1[this.editIndex].eventLocation=this.temp.eventLocation;
        this.list1[this.editIndex].referencePath=this.temp.referencePath;
        this.list1[this.editIndex].radius=this.temp.radius;
        console.log(this.temp);
        this.$forceUpdate();
        this.dialogFormVisible=false;
      },

原因是：官方 - 由于 JavaScript 的限制，Vue 不能检测数组和对象的变化；尤雨溪 - 性能代价和获得用户体验不成正比。

之后百度了一系列找到方法（使用$set方法；传参（该对象下标一列，修改的参数名，值））

      //点击确定保存路径
      setRowPath(){
        //事件位置赋值
        this.$set(this.list1[this.editIndex],'eventLocation',this.temp.eventLocation);
        this.$set(this.list1[this.editIndex],'altitude',this.temp.altitude);//事件位置 海拔
        this.$set(this.list1[this.editIndex],'longitude',this.temp.longitude);//事件位置 经度
        this.$set(this.list1[this.editIndex],'latitude',this.temp.latitude);//事件位置 纬度
        //参考路径
        this.$se