使用 Vue Js 和 Bootstrap 展开折叠图标

Question

我有一个带有展开折叠面板的 Bootstrap 手风琴，效果很好。 但是当扩展它应该显示减号图标，这对我来说效果不佳。 当我单击展开时，所有面板的图标都更改为减号，而不仅仅是更改展开的那个。 我在 Vue JS 模板中有我的代码，如下所示

我正在调用 onclick 切换函数来切换图标，但它也为所有其他面板执行此操作。

我该如何解决这个问题？提前致谢。

Vue.component('accordion', {
        data: function () {
            return {
                alerts: [],
                sound: '',
                collapsed:true
            }
        },
        template: `
                    <div>
                      <div v-for="(alert, index ) in alerts" class="panel panel-default">
                          <div class="panel-heading" v-bind:style="'background-color:'+alert.color" role="tab"  v-bind:id="'heading'+index"  >
                                  <a role="button" data-toggle="collapse" data-parent="#accordion"
                                           v-bind:href="'#collapse'+index" aria-expanded="true" v-on:click="toggle">
                                             <i id="collapseExpand" v-show="collapsed" class="more-less fa fa-plus"></i>
                                             <i id="collapseExpand" v-show="!collapsed" class="more-less fa fa-minus"></i>
                              <h4 class="panel-title">@{{ alert.description }}</h4></a>
                          </div>
  <div v-bind:id="'collapse'+index" class="panel-collapse collapse" role="tabpanel">
                          <div class="panel-body">
                              <div>@{{ alert.comment }}</div>
<div class="row">
                                            <form v-bind:id="'form_'+index"  v-bind:name="'form_'+index" v-bind:action="route"  method="POST" style="display: inline;">
                                                <input type="hidden" name="_token" :value="csrf">
                                                <input type ="hidden" v-bind:id="'trigger_id_'+alert.triggerid" name = "trigger_id" v-bind:value="alert.triggerid">
                                                <div class="col-lg-12">
                                                    <div class="input-group">
                                                        <input type="text" v-bind:id="'ack_msg_'+alert.triggerid" name="ack_msg" class="form-control"
                                                               placeholder="Acknowledge Message...">
                                                        <span class="input-group-btn">
                                                            <button class="btn btn-primary" type="submit">Save</button>
                                                        </span>
                                                    </div>
                                                </div>
                                            </form>
                                        </div>
                          </div>
                                <div class="panel-footer">@{{ alert.timestamp }}</div>
                          </div>
                      </div>
                          <input type="hidden" id="audioFile" name="audioFile" v-bind:value="sound">
                   </div>`,
        mounted: function () {
            this.loadData();
            setInterval(function () {
                this.loadData();
            }.bind(this), 1000);
        },
        methods: {
            loadData: function () {
                $.get('{{ route('getAlertsPersistent') }}', function (response) {
                    this.alerts = response;
                    this.sound = this.alerts[0].sound
                }.bind(this));
            },
            toggle(){
                this.collapsed = !this.collapsed ;
            }
        },

    });
    new Vue({el: '#accordion'});

Answer 1

您想将要循环的手风琴项目分开。通过这种方式，您可以在每个组件中拥有独立的状态。

<div>
    <accordion-item 
        v-for="(alert, index) in alerts"
        :alert="alert"
        :key="index">
    </accordion-item>
</div>

在您的<accordion-item/> 中，您的data 中应该有collapsed

另一种方法是将切换的项目存储在数组中。

export default {
    data: () => ({
        toggled: []
    }),
    methods: {
        isActive (item) {
            return this.toggled.indexOf(item) >= 0
        },
        toggleItem (item) {
            const index = this.toggled.indexOf(item)

            if (index >= 0) {
                this.toggled.splice(index, 1)
                return
            }

            this.toggled.push(item)
        }
    }
}

所以你现在可以按如下方式使用它

<a 
    role="button" 
    data-toggle="collapse" 
    data-parent="#accordion"
    v-bind:href="'#collapse'+index" 
    aria-expanded="true"
    v-on:click="toggleItem(index)">
    <i 
       :class="[isActive(index) ? 'fa-minus' : 'fa-plus']"
       class="more-less fa"></i>
       <h4 class="panel-title">@{{ alert.description }}</h4>
</a>

顺便说一句，您正在循环 id=collapseExpand，这会导致您出现问题。试试:id="'collapseExpand' + index"