VueJS component does not update data

Question

I know there is many similar questions about data not being updated in VueJS component but I still could not find the answer. I have the following component:

<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>

In the created hook, I capture changes coming from a websocket and I update the corresponding item in the array dataSources. I can see the item is properly updated in Vue Dev Tools but it is still not updated in the component template. Example below:

Alexis.Rolland · Accepted Answer · 2020-03-01 14:15:24Z

3

This is a common mistake with vuejs. You can check the document here: Why isn’t the DOM updating? In Your case, you can use push or $set to achieve your purpose.

When you modify an Array by directly setting an index (e.g. arr[0] = val) or modifying its length property. Similarly, Vue.js cannot pickup these changes. Always modify arrays by using an Array instance method, or replacing it entirely. Vue provides a convenience method arr.$set(index, value) which is syntax sugar for arr.splice(index, 1, value).

Example:

Replace this.dataSources[i] = updatedDataSource;
By this.dataSources.splice(i, 1, updatedDataSource);

edited Mar 1, 2020 at 14:15

Alexis.Rolland

6,4217 gold badges58 silver badges84 bronze badges

answered Mar 1, 2020 at 13:52

徐晓飞

463 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hossein Shafiei · Accepted Answer · 2020-03-01 20:21:24Z

0

When you modify an Array by directly setting an index (e.g. arr[0] = val) or modifying its length property. Similarly, Vue.js cannot pickup these changes. Always modify arrays by using an Array instance method, or replacing it entirely. Vue provides a convenience method arr.$set(index, value) which is syntax sugar for 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!
        }
      }
    }

answered Mar 1, 2020 at 20:21

Hossein Shafiei

6536 silver badges8 bronze badges

Collectives™ on Stack Overflow

VueJS component does not update data

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related