Question

因此，我有以下数据，我的目标是每次更改此对象中的数据时都重新计算用户的结果。这是数据。

data() {
  return {     
    test: 0, 
    userData: {
      sex: null,
      age: null,
      feet: null,
      inches: null,
      activity: null,
      goal: null,
    },
  }
}

现在我已经尝试实现监视和计算，但是它接缝了Vue在对象中的各个项目更改时没有注意到。但是，如果我从对象中取出一些数据，它确实会注意到更改。

这是我尝试观看的内容：

watch: {
  userData: function () {
    console.log("Changed");
  }
}

结果在控制台中什么都没有。

对于计算机，我尝试了以下操作：

computed: {
  results: function () {
    console.log(this.userData);
    return this.userData.sex;
  }
}

但是，控制台上仍然没有打印任何内容。

如果我尝试使用测试变量：

watch: {
  test: function () {
    console.log("Changed");
  }
}

更改变量后，它的输出将更改。之所以有效，是因为它不是对象。

任何帮助将不胜感激。同样，目标是每当任何userData更改时都重新计算结果。

Answer 1

您是否真的在使用results属性（例如在您的模板中）？如果不使用计算的属性，则不会重新计算它们。

与@match所说的相反，我怀疑您有反应性问题，因为您没有添加或删除属性（它们已经存在于数据中，因此它们已经是反应性的）。

Answer 2

这是一种方法。您需要（如@match所述）使用Vue.set()或vm.$set()。我发现也有必要将您的watcher属性更新为userData.sex。

new Vue({
  el: "#app",
  data: {  
    status: '', 
    userData: {
      sex: ''
    },
  },
  methods: {
    updateValues(){
      // Or Vue.set()
      this.$nextTick( function(){
        const newUserData = Object.assign({}, this.userData);
        newUserData.sex = "Male";
        this.userData = newUserData;
      });
    }
  },
  watch: {
    userData: function (v) {
      this.status += "userData Changed";
    },
    'userData.sex': function (v) {
      this.status += "\nuserData.sex Changed";
    }
  }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.8/dist/vue.min.js"></script>
<div id="app">
  <pre v-text="'userData.sex = ' + userData.sex"></pre>
  <pre v-text="status"></pre>
  <button @click="updateValues()">
    Change Sex
  </button>
</div>

编辑：

重新分配整个对象userData会触发watch.userData。

使用Vuejs更改对象中的任何数据时，如何运行函数？

2 个答案: