vue v-forループ、クラスを個別に追加する

Question

私はリストをループしてそのリストを表示するためにv-forを使用しています。

レンダリング後、各リストにはタイトルと非表示のコンテンツが含まれています。そのリストのタイトルを1つ選択すると、すべてのコンテンツではなくそのコンテンツが表示されます。

は、これまでのところ、私はこの（@thanksdのおかげで）やっている：あなたがコンテンツを一覧表示する変数を構築している場合

<div class="link"> 
    <p @click="show = true"> Click here to show the content </p> 
    <div v-show="show" class="content"> 
    <p>This is the hidden content</p> 
    </div> 
</div> 
<div class="link"> 
    <p @click="show = true"> Click here to show the content </p> 
    <div v-show="show" class="content"> 
    <p>This is the hidden content</p> 
    </div> 
</div> 

data() { 
    return { 
    show: false, 
    }; 
} 

Answer 1

あなたはこのような何かを書くことができますオブジェクトは、構文はv-for="(value, key) in items"です。 keyをループ内に宣言することも推奨されています。

関連文書hereを読む。

Answer 2

これを行うには多くの方法がありますが、それは簡単です

<div class="link" v-for="link in links"> 
    <p @click="link.show = true"> Click here to show the content </p> 
    <div v-show="link.show" class="content"> 
    <p>{{ link.content }}</p> 
    </div> 
</div> 

data() { 
    return { 
    links: [{ 
     title: 'the title', 
     content: 'the hidden content', 
     show: false, 
    },{ 
     title: 'the other title', 
     content: 'the other hidden content', 
     show: false, 
    },] 
    }; 
} 

あなたが反復されている場合

<div class="link" v-for="(item, index) in items" :key="index"> 
    <p @click="show = index"> Click here to show the content </p> 
    <div v-show="show === index" class="content"> 
    <p>This is the hidden content</p> 
    </div> 
</div> 

：

Answer 3

ユーザーがもう一度クリックしたときに非表示にしたい場合は、@Leoの回答に「show === index？show = -1：show = index」という三項比較を追加する必要があります。

<div class="link" v-for="(item, index) in items" :key="index"> 
    <p @click="show === index ? show = -1 : show = index"> Click here to show the content </p> 
    <div v-show="show === index" class="content"> 
    <p>This is the hidden content</p> 
    </div> 
</div> 

data() { 
    return { 
    show: -1, 
    }; 
}