Разверните свернуть значки с помощью Vue Js и Bootstrap - PullRequest
Новая
       13

Разверните свернуть значки с помощью Vue Js и Bootstrap

0 голосов
/ 16 июня 2020

У меня есть аккордеон 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'});

1 Ответ

1 голос
/ 16 июня 2020

Вы хотите отделить свой аккордеонный элемент от l oop. Таким образом, вы можете иметь изолированные состояния в каждом компоненте. 

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

внутри вашего <accordion-item/> у вас должно быть collapsed внутри вашего data

Другой способ - сохранить переключаемые элементы в массиве. 

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"

...