v-for의 관련 데이터 만 표시

Question

다음 코드가 있습니다.

<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>

이제 버튼을 클릭 하면 현재 제목 Click Here과 관련된 항목 subshown이 표시됩니다. 현재를 클릭 Click Here하면 모두 subshown표시됩니다.

연결된 것만 표시되도록 구현하는 방법은 무엇입니까?

Answer 1

라는 속성을 추가 한 currentIndex다음 클릭 이벤트를 사용하여 업데이트하고 조건부 렌더링에 사용합니다.

<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>