CODEWITHSUNDEEP
nuxt.js
JackJack
JackJack

Reputation: 632

Update data fetched by asyncData() in Nuxt

I wonder if there is a way to update the data returned by asyncData()? For a forum app, in the post page, I got the replies data in the following way:

async asyncData(){
    const {data:replies}=await axios.get('replies.json')
    return { replies }
}

And render it in the template:

<div v-for="rep in replies">
    <div>{{rep.likes}}</div>
    <div>{{rep.content}}</div>
</div>

I want to implement a replyToPost feature in the post page. However, when a user posts a reply, I don't know how to update the replies data that already fetched by the asyncData() method.

Upvotes: 2

Views: 1729

Answers (1)

Andrew1325
Andrew1325

Reputation: 3579

Any asyncData item, in your case 'replies' behaves just like a regular data item once it is initialised because Nuxt.js will automatically merge the returned object with the component data.. Therefore you can alter it as you would any other data item. I assume 'replies' is an array so you could just have a method:

newReply(reply) {
  this.replies.push(reply)
}

and it will be added to the array.

Upvotes: 1

Related Questions