Component's data property is not reactive when fetched via fetch method

Question

I have a simple "show" component that fetches some data via an API call and renders it on the page.

<template>
  <div class="showNote">
    <div>
      {{note.title}}
    </div>
  </div>
</template>

<script>
  import NotesAPI from '@/api/notes'
  export default {
    data() {
      return {
        note: {}
      }
    },
    async fetch() {
      let id = this.$route.params.id
      let response = await NotesAPI.fetchNote(id)
      let data = response.data
      this.note.title = data.title
    }
  }
</script>

I'm finding that the rendered template is blank even though the data has been fetched and set on the data field. I can confirm this via the Vue Inspector

It seems like the data property is not reactive and I'd need some way to force the re-rendering of the page. But obviously this would be the wrong approach. What am I missing? Why is the component not rendering my data changes?

👍 . Anyone else having the same problem can read it here: vuejs.org/v2/guide/reactivity.html#For-Objects — udit
– udit, Commented Aug 2, 2021 at 21:42

Boussadjra Brahim · Accepted Answer · 2021-08-02 21:36:50Z

2

Try to use this.$set to set nested value of an object :

 this.$set(this.note,'title', data.title)

answered Aug 2, 2021 at 21:36

Boussadjra Brahim

90k19 gold badges163 silver badges183 bronze badges

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

Collectives™ on Stack Overflow

Component's data property is not reactive when fetched via fetch method

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related