vue.js 中的观察者将不会收到值

Question

我在 vue 中使用观察器来更新组件中的值 Persons.vue 一旦数组从 [=37 传递过来=] 到 Persons.vue 作为道具的变化。当我使用选项列表更新道具时，它工作正常并更新。但是，一旦我使用日期选择器设置新日期，保存到道具 personData 的数组就会在控制台日志中正确更新，但不会在观察者中收到。

非常感谢任何解决此问题的提示！

这是我基于一个更大的应用程序的虚构代码设置，但我希望你能解决问题。

App.vue

<template>
  <div id="app">
    <select @change="person($event)">
      <option :value="selectionOne">One</option>
      <option :value="selectionTwo">Two</option>
    </select>
    <flat-pickr v-model="initDate" :config="config" @on-change="changeTime"></flat-pickr>
  </div>
</template>

如果我从更新人开始，值会正确发送给观察者，但如果我之后是运行 changeTime 函数，通过更改日期，值不会发送给观察者

  data() {
    return {
      selected: "selectionOne",
      selectionOne: "selectionOne",
      selectionTwo: "selectionTwo",
      personOne: [{ firstName: "XX" }, { born: "XXXX" }],
      personTwo: [{ firstName: "YY" }, { born: "YYYY" }],
      personData: []
    };
  },
  created() {
    this.personData = [{ firstName: "XX" }, { born: "XXXX" }];
  },

  methods: {
    // if I start with updating the person the value is sent to the watcher correctly
    person(e) {
      this.selected = e;
      this.updateNames(e);
    },
    // but if I after that is running the changeTime function by changing the date the value is not sent to the watcher
    changeTime(selectedDates) {
      this.born = this.timeFormatter(selectedDates[0]);
      this.updateNames(this.selected);
    },

    updateNames(e) {
      this.selected = e;
      let selection = e.target.value.split(",");
      if (selection == "selectionOne") {
        this.personData = this.personOne;
        // updating the second position with new born object
        this.personData[1] = { born: this.born };
      }
      if (selection == "selectionTwo") {
        this.personData = this.personTwo;
        this.personData[1] = { born: this.born };
      }
      console.log(this.personData)
    }
  }
};

Persons.vue

export default {
  name: "Persons",
  props: {
    personData: {
      type: Array
    }
  },

  watch: {
    personData: {
      deep: true,
      immediate: true,
      handler(newValue) {
        try {
          console.log("newValue", newValue);
        } catch (err) {
          console.log("no data yet ...");
        }
      }
    }
  }
};
</script>

Answer 1

您可以像这样尝试使用 this.$set：

updateNames(e) {
  this.selected = e;
  let selection = e.target.value.split(",");
  if (selection == "selectionOne") {
    this.personData = this.personOne;
    // updating the second position with new born object
    this.$set(this.personData, 1, { born: this.born });
  }
  if (selection == "selectionTwo") {
    this.personData = this.personTwo;
    this.$set(this.personData, 1, { born: this.born });
  }
  console.log(this.personData)
}

但您可能想要重新评估您的设置。将数据作为一个对象存储在一个数组中，从另一个数组复制，似乎是处理此数据的一种麻烦方式。

vue.js 中的观察者将不会收到值

Watcher in vue.js won't receive value

javascript

watch

vue.js

vuejs2