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。更改数据时手表无法正常工作

1 个答案: