VueJS - Show async data in template

Question

I have this code:

<template>
  <div>
    <hot-table licenseKey='non-commercial-and-evaluation' :data="covertDataToTableReadable" colHeaders="true" width="600" height="300">
      <hot-column title="Employee:">
      </hot-column>
      <hot-column title="Date:">
      </hot-column>
      <hot-column title="Project name:">
      </hot-column>
      <hot-column title="Task Link">
      </hot-column>
      <hot-column title="Component">
      </hot-column>
      <hot-column title="Description">
      </hot-column>
      <hot-column title="Time to complete">
      </hot-column>
    </hot-table>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { HotTable, HotColumn } from '@handsontable/vue'

export default {
  data: function () {
    return {
      data: [],
    }
  },
  computed: {
    ...mapGetters('projectsPage', {
      headers: 'getTableHeaders',
      filteredTableData: 'getFilteredTableData',
      submitStatus: 'getSubmitStatus'
    }),
    loaded () {
      return this.$store.state.projectsPage__initializedTable
    },
    covertDataToTableReadable () {
      const data = []
      const filteredData = this.filteredTableData.map(item => {
        data.push([item.full_name, item.created_on, item.project_name, item.task_link, item.component_name, item.task_description, item.hours_spent])
      })

      if (data) {
        return data
      }
    }
  },
  components: {
    HotTable,
    HotColumn
  },
  methods: {
    transformAsanaLinkToAtag (asanaLink) {
      if (!asanaLink) {
        asanaLink = ''
      }
      asanaLink = asanaLink.trim()
      let regex = /^https?:\/\/[^\s]+$/g
      if (regex.test(asanaLink)) {
        return '<span><a target="_blank" href=' + asanaLink + '>Task URL</a><i aria-hidden="true" class="v-icon material-icons info--text">open_in_new</i></span>'
      } else {
        return '<span>' + asanaLink + '</span>'
      }
    },
    addClasses (data) {
      let classes = 'default-row'
      if (data.is_billable === 'Yes') {
        classes += ' billable-row'
      }
      if (data.hasOwnProperty('deleted_on') && data.deleted_on !== null) {
        classes += ' deleted-row'
      }
      return classes
    }
  }
}
</script>

<style>
  .default-row {
    border-left: 5px solid #808080;
  }

  .billable-row {
    border-left: 5px solid #4caf50;
  }

  .deleted-row {
    border-left: 5px solid #FF0000;
    opacity: 0.3;
  }
</style>

I'm some changes to this variable filteredTableData in the computed function covertDataToTableReadable but in the template, I don't get the data I modified because filteredTableData is an observer.

When I console log filteredTableData it I get: [{…}, __ob__: Observer]

How can I tell Vue to await the result and then update it in the template? I would appreciate a more detailed explanation of how it works.

tony19 · Accepted Answer · 2022-07-15 04:42:04Z

1

The Observer bit is correct. Don't bother.

I think you're mutating a complex data type filteredTableData and Vue is not able to observe this. Please see https://v2.vuejs.org/v2/guide/reactivity.html

In your Vuex mutation you should operate like this:

const i = filteredTableData.length;
const someData = { foo: 'bar' };
Vue.set(filteredTableData, i, someData);

To be clear; Objects and Arrays should not be changed (mutated). The Observer mechanics can not handle the changes correctly. Changes should be applied by using the Vue.set() method.

edited Jul 15, 2022 at 4:42

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Mar 31, 2021 at 13:24

Gordon Freeman

3,4612 gold badges28 silver badges46 bronze badges

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

Comments

Rifat Cholakov · Accepted Answer · 2021-04-01 09:55:39Z

I've added if check(v-if) in the template which shows the renders the template after the data has arrived.

Here is the code:

<template>
  <div v-if="filteredTableData.length > 0">
    <hot-table licenseKey='non-commercial-and-evaluation' :data="covertDataToTableReadable" colHeaders="true" width="600" height="300">
      <hot-column title="Employee:">
      </hot-column>
      <hot-column title="Date:">
      </hot-column>
      <hot-column title="Project name:">
      </hot-column>
      <hot-column title="Task Link">
      </hot-column>
      <hot-column title="Component">
      </hot-column>
      <hot-column title="Description">
      </hot-column>
      <hot-column title="Time to complete">
      </hot-column>
    </hot-table>
  </div>
</template>

It solved my issue.

The data I'm expecting look like this(array of array):

[
   ['', 'Tesla', 'Mercedes', 'Toyota', 'Volvo'],
   ['2019', 10, 11, 12, 13],
   ['2020', 20, 11, 14, 13],
   ['2021', 30, 15, 12, 13]
],

Collectives™ on Stack Overflow

VueJS - Show async data in template

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