Question

我正在为vue应用程序提供自动保存功能，该功能会在每次对vue应用程序数据进行更改时将数据发送到api。使用Vue手表时是否可以忽略对象的某些属性？该对象具有多个要自动保存的值，只有1或2个可以忽略的值，因此为我想要的所有属性设置一个监视功能似乎没有意义，而是忽略了那个1我不会。

这是数据的基本结构：

data:{
  template: {
    name: "Template",
    id: 1,
    variables: [
      {
        name: "v1",
        color: "#fff",
        group: 1,
        isSelected: true
      },
      {
        name: "v2",
        color: "#fff",
        group: 3,
        isSelected: false
      }
    ]
  }
}

和基本监视功能：

watch: {
  template: {
    handler: function(){
      this.save();
    },
    deep: true
  }
}

模板中变量的isSelected字段仅用于UI，我希望手表忽略该字段的更改，因为它们没有保存。我不想为变量中的每个字段设置监视功能，而是在监视中执行以下操作：

ignore: "template.variables.isSelected"

Answer 1

您无法获得突变对象的旧值，因此我认为创建temp(save old data)以下的辅助数据将帮助您解决问题。然后检查旧数据和新数据...。

var app = new Vue({
el: "#app",
data:{
  a: 1,
  template: {
    name: "Template",
    id: 1,
    variables: [
      {
        name: "v1",
        color: "#fff",
        group: 1,
        isSelected: true
      },
      {
        name: "v2",
        color: "#fff",
        group: 3,
        isSelected: false
      }
    ]
  },
  temp: {}
},
mounted: function() {
// this.template.variables[0].isSelected = false;
 this.temp = JSON.parse(JSON.stringify(this.template));
 this.$set(this.template.variables[0],"isSelected", 222);
 
},
watch : {
 template: {
   handler: function(changeVal) {
     var flag = true;
     for(var i in changeVal.variables) {
       if(changeVal.variables[i].isSelected != this.temp.variables[i].isSelected) {
         flag = false;
       }
     }
     this.temp = JSON.parse(JSON.stringify(this.template)); // assign changed data as old data again for next process
     if(flag) console.log("saveData");// this.save();
     else console.log("notsave");
   },
   deep: true
 }
}
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

忽略VueJs的某些属性

1 个答案: