CODEWITHSUNDEEP
vue.jsvuejs2
dmr07
dmr07

Reputation: 1478

How to set v-if property from the template

I was wondering whether its possible to set a property in a v-for from the template. Specifically, story.verifyDelete is not present in the original array, but my setting it to true on click doesn't seem to activate the v-if="story.verifyDelete just above it.

<div v-for="story in stories">
    <div v-if="story.verifyDelete == true">
      <div>Are you sure you want to delete this story?</div>
      <div @click="remove(story.id)">Delete</div>
      <div @click="story.verifyDelete=false">Cancel</div>
    </div>
    <div @click="story.state == 'published' ? read(story) : edit(story)">{{ story.title }}</div>
    <div @click="story.verifyDelete = true">Delete</div>
</div>

Upvotes: 0

Views: 215

Answers (1)

Austio
Austio

Reputation: 6085

Objects are not reactive by normal setters = or [] in vue.

In your click handler for the Delete div, you will need to do a set in order to have vue notice the value change

this.$set(this.story, 'verifyDelete', true)

https://v2.vuejs.org/v2/guide/reactivity.html

Upvotes: 3

Related Questions