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 я фиксирую изменения, поступающие из веб-сокета, и обновляю соответствующий элемент в массиве dataSources. Я вижу, что элемент правильно обновлен в Vue Dev Tools, но он все еще не обновлен в шаблоне компонента. Пример ниже:

Answer 1

Это распространенная ошибка с vuejs. Вы можете проверить документ здесь: Почему не обновление DOM? В вашем случае вы можете использовать pu sh или $ 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);

Answer 2

Когда вы модифицируете массив, непосредственно устанавливая индекс (например, arr [0] = val) или изменяя его свойство длины. Точно так же Vue. js не может получить эти изменения. Всегда изменяйте массивы с помощью метода экземпляра Array или полностью его заменяя. Vue предоставляет удобный метод arr. $ Set (index, value) , который является синтаксическим сахаром для arr.splice (index, 1, value).

updateDataSource(updatedDataSource){
      for (let i = 0; i < this.dataSources.length; i++) {
        if (this.dataSources[i].id == updatedDataSource.id) {

          //this.dataSources[i] = updatedDataSource;
           this.dataSources.$set(i, updatedDataSource);
          break; // Stop this loop, we found it!
        }
      }
    }