重复元素具有相同的扩展变量 [英] Repeated elements have the same expand variable
问题描述
你好，我有一些来自 vuetify 的代码(https://vuetifyjs.com/en/components/cards#custom-actions)
所以我编辑了这样的代码:
<div><div v-for="item in 3" :key="item"><v-布局行><v-flex xs12 sm6 offset-sm3><v-card><v-imgsrc="https://cdn.vuetifyjs.com/images/cards/sunshine.jpg"高度=200像素"></v-img><v-card-title 主标题><div><div class="headline">热门西部公路旅行</div><span class="grey--text">1,000 英里的奇迹</span></v-card-title><v-card-actions><v-btn flat>分享</v-btn><v-btn flat color="purple">探索</v-btn><v-间隔></v-间隔><v-btn 图标@click="show = !show"><v-icon>{{ 显示 ?'keyboard_arrow_down' : 'keyboard_arrow_up' }}</v-icon></v-btn></v-card-actions><v-slide-y-transition><v-card-text v-show="show">我是一个东西.但是，像大多数政客一样，他承诺的比他能兑现的要多.你不会有时间睡觉，士兵，你不会有床铺.然后我们将使用该数据文件！嘿，你在上面加上一个和两个零，否则我们就走！你要帮他洗衣服?我得想办法逃走.</v-card-text></v-slide-y-transition></v-card></v-flex></v-layout>
</模板><脚本>导出默认{数据:() =>({显示:假})}
问题在于 show 变量.onClick 每个元素都会展开.
如何为每个元素设置一个自己的变量?还是只有点击这个元素才会展开?
好的，谢谢，我会测试这个
我找到了一个例子来做到这一点
https://vuejs.org/v2/guide/components.html
Hello i have some code from vuetify (https://vuetifyjs.com/en/components/cards#custom-actions)
so i edited code like this:
<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>
The problem is the show variable. onClick every element expands.
How can i set vor every element a own variable? or that on click only this element will expand?
OK thank you i will Test this
I found an example to do this
https://vuejs.org/v2/guide/components.html
这篇关于重复元素具有相同的扩展变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
