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

Question

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

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

现在我尝试实现监视和计算，但是当对象中的单个项目发生更改时，Vue 没有注意到。但是，如果我从对象中取出一些数据，它确实会注意到变化。

这是我尝试的 watch :

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

结果控制台中什么也没有。

对于计算，我尝试了以下方法:

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

但是控制台中再次没有打印任何内容。

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

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

当变量改变时，输出会改变。所以这是有效的，因为它不是一个对象。

任何帮助将不胜感激。同样，目标是每当用户数据发生更改时重新计算结果。

Answer 1

这是一种方法。您需要(如@match提到的)使用Vue.set()或vm.$set()。我发现还需要将您的观察者属性更新为 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。