Vue bootstrap - vue аккордеон не открывается - PullRequest
Новая
       22

Vue bootstrap - vue аккордеон не открывается

0 голосов
/ 25 февраля 2020

Я новичок в vue и действительно изо всех сил пытаюсь заставить мой динамически созданный аккордеон расширяться при нажатии. Я думаю, что это что-то базовое c Я скучаю, но я застрял на некоторое время. Этот кодовый блок показывает мои проблемы, я не могу понять? 

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

Ссылка на кодовый блок

1 Ответ

2 голосов
/ 25 февраля 2020

Ваша проблема - 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>
...