v-for和状态管理问题

Question

我有一个用v-for呈现的项目列表。我希望每个项目都有一个"?“即可单击以显示包含该特定项目描述的模式。我现在的问题是，当"?“被点击时，它会显示v-for中每一项的模式。我该如何解决这个问题？

<div
  v-for="(item, index) in items"
  :key="index"
>
  <div>
    {{ item.name }}
    <div>
      <span @click="itemModal = true">    
        ?
      </span>
      <div v-show="itemModal">
        {{ item.description }}
        <button @click="itemModal = false">
          Close modal
        </button>
      </div>
    </div>
  </div>
</div>

export default {
  data() {
    return {
      itemModal: false
    }
  }
}

Answer 1

您的itemModal属性当前与所有项目共享，因此您需要为每个项目提供一个模式状态。

例如：您可以创建一个toggle方法来更新模态状态的array：

<div
  v-for="(item, index) in items"
  :key="index"
>
  <div>
    {{ item.name }}
    <div>
      <span @click="toggle(index)">    
        ?
      </span>
      <div v-show="itemModal[index]">
        {{ item.description }}
        <button @click="toggle(index)">
          Close modal
        </button>
      </div>
    </div>
  </div>
</div>

export default {
  data() {
    return {
      itemModal: []
    }
  },
  methods: {
    toggle(index) {
      this.$set(this.itemModal, index, !this.itemModal[index])
    }
  }
}

nb:一个数组(或一个对象)在深度上不是反应式的，所以我们必须使用Vue.$set (cf.docs)