Как вы запускаете функцию, когда любые данные в объекте изменяются с помощью Vuejs?

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");
  }
}

Выход БУДЕТ изменен при изменении переменной.Так что это работает, потому что это не объект.

Любая помощь будет принята с благодарностью.Опять же, цель состоит в том, чтобы пересчитать результаты всякий раз, когда изменяются какие-либо данные пользователя.

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";
    }
  }
})

Изменить пол

EDIT:

Повторное назначение всего объекта, userData, вызывает watch.userData.

Answer 2

Вы действительно используете свойство results (например, в вашем шаблоне)?Вычисленные свойства не пересчитываются, если они не используются.

В отличие от того, что говорит @match, я сомневаюсь, что у вас есть проблема реактивности, поскольку вы не добавляете и не удаляете свойства (они уже существуют в ваших данных, поэтомуони уже реактивны).