Laravel 使用Vue Js和引导展开折叠图标

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

我调用toggle函数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'});

---

您希望分离要循环的手风琴项目。这样，您可以在每个组件中具有独立的状态

---

顺便说一句，您正在循环一个id=collapseExpand，这将导致您出现问题。相反，试试：id='collapseExpand'+index

谢谢@Darick，你救了我一天：