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（参见docs）

v-for和状态管理问题

1 个答案: