如何从模板设置 v-if 属性

Question

我想知道是否可以通过模板在 v-for 中设置属性。具体来说，story.verifyDelete 不存在于原始数组中，但我在点击时将其设置为 true 似乎并没有激活它上面的 v-if="story.verifyDelete。

<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>

Answer 1

Vue 中的普通设置器 = 或 [] 不会响应对象。

在删除 div 的点击处理程序中，您将需要进行设置以使 vue 注意到值更改

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

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

如何从模板设置 v-if 属性

How to set v-if property from the template

vue.js

vuejs2