vue 中v-for循环出的list下的item 如何操作使被点击的元素显示或隐藏

Question

我用v-for循环出来的列表，我点击哪个就让哪个shareAnimate显示出来，我操作shareAnimate会全部显示,我该怎么做只显示那个点击的item

<div class="article-list-item" v-for="(item,index) in list" @click="toArticleDetail(item)">
        <div class="shareAnimate" v-show="shareAnimate">
                    <span>+{{item.point}}</span>
        </div>
</div>

Answer 1

思想应该是这样的：
控制子元素的显示与隐藏应该是在子元素的index标识上进行操作，用点击的那个索引与子元素绑定的index进行对比，来判断元素的显示与隐藏

<template>
    <div class="test-wrapper">
        <div class="article-list-item" v-for="(item,index) in list" :key="index"
        @click="toArticleDetail(index)">
            <div class="shareAnimate" v-show="activeIndex===index">
                <span>+{{item.point}}</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "test",
    data() {
        return {
            activeIndex: -1 // 初始化点击的索引值
        };
    },
    methods: {
        toArticleDetail(index) {
            this.activeIndex = index;
        }
    }
}
</script>

Answer 2

<div class="article-list-item" v-for="(item,index) in list" @click="toArticleDetail(index)">
        <div class="shareAnimate" v-show="shareAnimate==index">
                    <span>+{{item.point}}</span>
        </div>
</div>
……
//函数可以这么写
toArticleDetail(index){
this.shareAnimate=index;
}

不知道是不是你要的！

Answer 3

给list中的每个元素添加一个默认标志属性 如isAct=false；

<div class="shareAnimate" v-show="item.isAct">
            <span>+{{item.point}}</span>
</div>

toArticleDetail函数这样写：

for(var i=0;i<this.list.length;i++){
    this.list[i].isAct = false
}
item.isAct=true;

这样就可以了

Answer 4

你这样肯定不行的。
下面例子供参考https://segmentfault.com/a/11...

Answer 5

<div class="article-list-item" v-for="(item,index) in list" @click="toArticleDetail(index)">

    <div class="shareAnimate" v-show="shareAnimate">
                <span>+{{item.point}}</span>
    </div>

</div>
data(){
return{
index:-1
}
},
methods:{
toArticleDetail(index){
this.index=index;
}
}

Answer 6

我最近也遇到了同样的问题。
尝试了各种方案无果，最终的解决方案是在传入数据之前做个处理，为每个元素添加一个单独的属性，来控制他的显示或者隐藏，如下：

//在list中添加"isShow"属性
<div class="article-list-item" v-for="(item,index) in list" @click="toArticleDetail(item)">
        <div class="shareAnimate" v-show="item.isShow">
                    <span v-text="'+'+item.point"></span>
        </div>
</div>