只显示 v-for 中的关联数据

中的关联数据

关注

发信

关注(28)粉丝(399)

只显示 v-for 中的关联数据

本文介绍了只显示 v-for 中的关联数据的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有以下代码:

<div><div v-for=标题中的标题"><h1>{{title}}</h1><a @click="showSub">点击这里</a><div v-if="subshown">显示

</模板><脚本>导出默认{数据() {返回 {子显示:假，标题:[]}},方法: {showSub: 函数 () {this.subshown = true;//做更多的事情}}}

当我现在单击 Click Here 按钮时，应显示当前标题的相关 subshown.目前，当我点击 Click Here 时，会显示所有 subshown.

如何实现只显示关联?

解决方案

添加一个名为 currentIndex 的属性，然后使用点击事件更新它并在条件渲染中使用它:

<div><div v-for="(title,index) in titles"><h1>{{title}}</h1><a @click=showSub(index)">点击这里</a><div v-if="currentIndex===index">显示

</模板><脚本>导出默认{数据() {返回 {当前索引:-1，标题:[]}},方法: {showSub:函数(索引){this.currentIndex=this.currentIndex===index?-1:index//做更多的事情}}}

I have the following code:

<template>
<div>
    <div v-for="title in titles">
        <h1>{{ title }}</h1>
        <a @click="showSub">Click Here</a>
        <div v-if="subshown">
            Shown
        </div>
    </div>
</div>
</template>

<script>
    export default {
        data() {
            return {
                subshown: false,
                titles: []
            }
        },
        methods: {
            showSub: function () {
                this.subshown = true;
                // do something more
            }
        }
    }
</script>

When i now click on the Click Here Button, the associated subshown from the current title should be shown. At the moment, when i click on Click Here, all subshown are shown.

How to implement that only the associated is shown?

解决方案

Add a property called currentIndex then update it using the click event and use it in conditional rendering :

<template>
<div>
    <div v-for="(title,index) in titles">
        <h1>{{ title }}</h1>
        <a @click="showSub(index)">Click Here</a>
        <div v-if="currentIndex===index">
            Shown
        </div>
    </div>
</div>
</template>

<script>
    export default {
        data() {
            return {
                currentIndex:-1,
                titles: []
            }
        },
        methods: {
            showSub: function (index) {
              this.currentIndex=this.currentIndex===index?-1:index
                // do something more
            }
        }
    }
</script>

这篇关于只显示 v-for 中的关联数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-12 14:24