javascript - 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])
    }
  }
}

注意:数组(或对象)在深度上不具有反应性，因此我们必须使用 Vue.$set (参见 docs )