Question

我是vue的新手，在单击时我很难使动态创建的手风琴扩展。我认为这是我最想念的基本东西，但是我已经坚持了一段时间。该代码笔显示了我的麻烦，我无法解决吗？

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

Vue bootstrap-vue手风琴无法打开

1 个答案: