重复的元素具有相同的展开变量

你好，我有一些来自 vuetify 的代码（https://vuetifyjs.com/en/components/cards#custom-actions https://vuetifyjs.com/en/components/cards#custom-actions)

所以我编辑了这样的代码：

<template>

<div>
  <div v-for="item in 3" :key="item">

  <v-layout row >
    <v-flex xs12 sm6 offset-sm3>
      <v-card>
        <v-img
          src="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg"
          height="200px"
        >
        </v-img>

        <v-card-title primary-title>
          <div>
            <div class="headline">Top western road trips</div>
            <span class="grey--text">1,000 miles of wonder</span>
          </div>
        </v-card-title>

        <v-card-actions>
          <v-btn flat>Share</v-btn>
          <v-btn flat color="purple">Explore</v-btn>
          <v-spacer></v-spacer>
          <v-btn icon @click="show = !show">
            <v-icon>{{ show ? 'keyboard_arrow_down' : 'keyboard_arrow_up' }}</v-icon>
          </v-btn>
        </v-card-actions>

        <v-slide-y-transition>
          <v-card-text v-show="show">
            I'm a thing. But, like most politicians, he promised more than he could deliver. You won't have time for sleeping, soldier, not with all the bed making you'll be doing. Then we'll go with that data file! Hey, you add a one and two zeros to that or we walk! You're going to do his laundry? I've got to find a way to escape.
          </v-card-text>
        </v-slide-y-transition>
      </v-card>
    </v-flex>
  </v-layout>

  </div>
 </div>
</template>

<script>
export default {
   data: () => ({
    show: false
  })
}
</script>

问题是show多变的。 onClick 每个元素都会展开。

我如何为每个元素设置一个自己的变量？或者点击时只有这个元素会展开？

您有多种选择。

这个例子有点人为，因为它使用了<div v-for="item in 3" :key="item">。在实际用例中，您可能会迭代对象数组，并且可以保存show每个对象内的值。

如果无法将其存储在对象中，那么您可以（有点痛苦）为显示值维护一个单独的数组，使用索引将两个数组连接在一起。

但最好的解决方案可能是提取一个新组件。一般来说，当你有一个v-for对于某种可编辑状态，值得考虑提取新组件，因为它通常最终是最简单的解决方案。在这种情况下，这些组件可以各自拥有自己的show value.

So:

<div v-for="item in 3" :key="item">

会成为：

<my-new-component v-for="item in 3" :key="item">

然后您将模板的所有其余部分移入my-new-component.