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

【问题标题】：Repeated elements have the same expand variable重复元素具有相同的展开变量
【发布时间】：2019-07-07 12:11:11
【问题描述】：

您好，我有一些来自 vuetify (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 每个元素都会展开。

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

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

您有多种选择。

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

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

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

所以：

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

会变成：

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

然后您会将模板的所有其余部分移至my-new-component。

【讨论】：

【解决方案2】：

好的，谢谢你，我会测试这个

我找到了一个例子来做到这一点

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

【讨论】：