Bootstrap-vue ループ中にトグルを設置する方法

・クリックで該当のオブジェクトに関する情報だけが展開するtoggleを作成する

・全部のオブジェクトのトグルが一緒に開くような愚行は許さない

・クリックすると矢印のアイコンは逆向きになる

オブジェクト配列stocksを回す

<span v-for="stock in stocks" :key="stock.id">
    <a v-if="toggleSelected ==stock.id && toggle" v-b-toggle :href="'#example-collapse'+stock.id"
        @click.prevent @click="toggleClose(stock.id)">
        <font-awesome-icon class="toggle-link" :icon="['fa', 'angle-up']" />
    </a>
    <a v-if=" toggle==false ||toggleSelected !=stock.id  " v-b-toggle
        :href="'#example-collapse'+stock.id" @click.prevent @click="toggleOpen(stock.id)">
        <font-awesome-icon class="toggle-link" :icon="['fa', 'angle-down']" />
    </a>
</span>

font-awesomeのアイコンはいい感じに自分の環境に合わせて置き換えてくれ。

data() {
    return {
        stocks: null,//ここにオブジェクト配列を格納するAPIが別途必要
        toggle: false,
        toggleSelected: null,
    }
},
methods: {
    toggleClose(id) {
        this.toggle = false
        this.toggleSelected = id
    },
    toggleOpen(id) {
        console.log(id)
        this.toggle = true
        this.toggleSelected = id
    },
}

コード全体でいうと上記のような感じになる。

トグル閉じるボタンについて

<a v-if="toggleSelected ==stock.id && toggle" v-b-toggle :href="'#example-collapse'+stock.id"
        @click.prevent @click="toggleClose(stock.id)">
        <font-awesome-icon class="toggle-link" :icon="['fa', 'angle-up']" />
</a>

閉じている時は下向きの矢印が表示されている。

選択されたトグルにおけるID要素と同じIDがtoggleCloseメソッドに渡される

かつ

変数toggleがtrue

であれば、該当トグルだけを展開する。

そしてアイコンが逆向きの上向き矢印になる。

トグル展開ボタンについて

<a v-if=" toggle==false ||toggleSelected !=stock.id  " v-b-toggle
        :href="'#example-collapse'+stock.id" @click.prevent @click="toggleOpen(stock.id)">
        <font-awesome-icon class="toggle-link" :icon="['fa', 'angle-down']" />
</a>

開いている時は上向きの矢印が表示されている。

選択されたトグルにおけるID要素と同じIDがtoggleOpenメソッドに渡される

かつ

変数toggleがfalse

であれば、該当トグルだけを閉じる

BootstrapVue