Vue bootstrap-vue 手风琴打不开

Question

我是 vue 的新手，我真的很难让我动态创建的手风琴在点击时展开。 我认为这是我缺少的一些基本的东西，但我已经被困了一段时间。 这个codepen显示我的烦恼，我想不通？

<template>
    <div role="tablist">
      <b-card v-for="(item, index) in feature_info" no-body class="mb-1">
        <b-card-header header-tag="header" class="p-1" role="tab">
          <b-button block href="#" v-bind:v-b-toggle="'accordion-' + index" variant="info">[[ item.layerName ]]</b-button>
        </b-card-header>
        <b-collapse v-bind:id="'accordion-' + index" accordion="my-accordion" role="tabpanel">
          <b-card-body>
            <b-card-text>Mock text</b-card-text>
          </b-card-body>
        </b-collapse>
      </b-card>
    </div>
  </template>

Link to codepen

Answer 1

您的问题是v-bind:v-b-toggle="'accordion-' + index"。 v-b-toggle 是一个指令，因此您不需要在其上使用 v-bind。因此，如果您只是从中删除 v-bind:，它应该可以工作。

new Vue({
    el: '#app',
    delimiters: ['[[',']]'],
    data: {
      message:"Hello",
      feature_info:[
        {layerName: 'Hello Vue!'},
        {layerName: 'Second'}
      ],
    }
})

<link href="https://unpkg.com/bootstrap@4.4.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://unpkg.com/bootstrap-vue@2.5.0/dist/bootstrap-vue.css" rel="stylesheet"/>

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.11/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.5.0/dist/bootstrap-vue.js"></script>


<div id="app">
  <div role="tablist">
    <b-card v-for="(item, index) in feature_info" no-body class="mb-1">
      <b-card-header header-tag="header" class="p-1" role="tab">
        <b-button block href="#" v-b-toggle="'accordion-' + index" variant="info">[[ item.layerName ]]</b-button>
      </b-card-header>
      <b-collapse v-bind:id="'accordion-' + index" accordion="my-accordion" role="tabpanel">
        <b-card-body>
          <b-card-text>Mock text</b-card-text>
        </b-card-body>
      </b-collapse>
    </b-card>
  </div>
</div>