vue-js。数据更改时手表不工作

Question

我是 vue.js 的新手。但是我在数据绑定和重新渲染方面遇到了麻烦。结合 socket-io 和 vue-chartjsm 我遇到了渲染问题。

我打算通过 generateData() 更改数据，这似乎有效。我希望 watch: 会起作用，但它没有。

我想我误解了一些概念。你能告诉我我的想法有什么问题吗？

App.vue

(...)
export default {
  name: "App",
  components: {
    ReactiveBarChart
  },
  data() {
    return {
      chartData: null,
      originalData: null
    };
  },
  watch: {
    originalData: function(data) {
      console.log(data)
      // not triggered after generateData() is called
    }
  },
  methods: {
    generateData() {
      let changeArray = [];
      changeArray = this.originalData;
      changeArray[0] = 20;
      this.originalData = changeArray;
      console.log("data :", this.originalData)
      // logged properly with [20, .....]
    },
(...)

Answer 1

尝试将 originalData 声明为空数组，并将您的值 push() 声明为空数组。您的代码可能类似于：

export default {
  data() {
    return {
      chartData: null,
      originalData: []
    };
  },
  watch: {
    originalData: function(data) {
      console.log(data)
    }
  },
  methods: {
    generateData() {
      let changeArray = [];
      changeArray = this.originalData;
      changeArray.push(20);
      this.originalData = changeArray;
      console.log("data :", this.originalData)
    }
  }
}

如果您特别想更改第一个位置的数组值，请使用 splice(0,1,20) 而不是 push(20)

您可以阅读有关 Array Methods

的更多有用信息

vue-js。数据更改时手表不工作

vue-js. watch doesn't work when data is changed

watch

vue.js