[Vuejs]-Create v-expansion-panels from API data

by

0👍

The issue is when you get the api object you are using Object.assign which does not trigger reactivity so you need to create a fresh object and then assign the new data:

getReport() {
      apiService
        .getMobReport()
        .then(res => {
          const reportData = res.data
          const newData = {};
          Object.entries(reportData).forEach(entry => {
            const [key, value] = entry
            Object.assign(newData, value)
          })
          // HERE we are mutating the object and triggering reactivity
          this.mobReport = Object.assign({}, this.mobReport, value)
          return this.mobReport
        })
        .catch(error => {
          console.error(error)
        })
        .finally(() => {
          this.loading = false
        })
    },

you can also return a function to your computed but with the caveat that it will be executed in every re-render and it won’t be cached

computed: {
    mobReports: () => {
      console.log(this.report)
      if (this.report) {
        console.log('mobReports')
        return this.report
      }
      return {}
    }
  }

also, I don’t think you need the intermediary computed in there, you can use the prop directly

Leave a comment