javascript - VueJS 组件不更新数据

Question

我知道有很多关于 VueJS 组件中未更新数据的类似问题，但我仍然找不到答案。我有以下组件：

<template>
  <div class="mt-5">
    [...]
    <div v-for="dataSource in dataSources" v-bind:key="dataSource.id">
      {{ dataSource}}
    </div>
    [...]
  </div>
</template>

<script>
import { chain, find, merge, toUpper } from "lodash";
import Mixins from "../utils/Mixins.vue";
import Pagination from "../utils/Pagination.vue";
import DataSourceTable from "./DataSourceTable.vue";

export default {
  mixins: [Mixins],
  components: {
    "data-source-table": DataSourceTable,
    "data-source-pagination": Pagination
  },
  data: function() {
    return {
      dataSources: [],
      //[...]
    };
  },
  methods: {
    getAllDataSources(page) {
      //[...]
    },
    search() {
      //[...]
    },
    setSortAttribute(attribute) {
      //[...]
    },
    updateDataSource(updatedDataSource){
      for (let i = 0; i < this.dataSources.length; i++) {
        if (this.dataSources[i].id == updatedDataSource.id) {
          this.dataSources[i] = updatedDataSource;
          break; // Stop this loop, we found it!
        }
      }
    }
  },
  created: function() {
    this.getAllDataSources(this.currentPage);

    // Capture updated data source via websocket listener
    this.$options.sockets.onmessage = function(data) {
      let message = JSON.parse(data.data);
      if (message.id == "dataSource" && message.type == "data") {
        let updatedDataSource = message.payload.data.listen.relatedNode;
        this.updateDataSource(updatedDataSource);
      }
    }
  }
};
</script>

在created钩子中，我捕获了来自 websocket 的更改，并更新了数组中的相应项目dataSources。我可以看到该项目在 Vue 开发工具中已正确更新，但在组件模板中仍未更新。下面的例子：

标签： javascriptvue.jsvuejs2

Answer 1

这是 vuejs 的常见错误。你可以在这里查看文档：为什么 DOM 没有更新？ 在您的情况下，您可以使用 push 或 $set 来实现您的目的。

当您通过直接设置索引（例如 arr[0] = val）或修改其长度属性来修改数组时。同样，Vue.js 也无法获取这些更改。始终使用 Array 实例方法或完全替换它来修改数组。Vue 提供了一个方便的方法 arr.$set(index, value)，它是 arr.splice(index, 1, value) 的语法糖。

例子：

• 代替this.dataSources[i] = updatedDataSource;
• 经过this.dataSources.splice(i, 1, updatedDataSource);