Vue.js Push не обновляет вид - PullRequest
Новая
       10

Vue.js Push не обновляет вид

0 голосов
/ 18 ноября 2018

Я создаю массив, который содержит объекты, описывающие информацию о кнопках.в моем шаблоне у меня есть класс active, который представляет активную кнопку.по умолчанию первая кнопка массива активна.

шаблон: 

<b-button-group class="page-buttons mt-2" size="sm">
   <b-button v-for="btn in buttons" 
      :key="btn.key" 
      @click="selectPage(btn.key)"
      v-bind:class="{'active': btn.active}">{{ btn.caption }}
   </b-button>
 </b-button-group>

Скрипт: 

methods: {
    $createPaginationButtons: function(numberParameters) {
      const numberPages = Math.ceil(numberParameters / NUMBER_ELEMENT_PER_PAGE);
      this.buttons = [];

      for (let i = 0; i < numberPages; i++) {
        this.buttons.push({
          caption: `PAGE ${i + 1}`,
          active: (i === 0),
          key: (i + 1)
        });
      }

      Vue.set(this.buttons[0], 'active', true);
   }
}

Массив кнопок инициализируется в данных как пустой массив,когда мой массив кнопок изменяется, вид обновляется и отображается правильное количество кнопок, но мой класс active не запускается.

Есть ли у вас какие-либо идеи.

1 Ответ

0 голосов
/ 18 ноября 2018

Push - это упакованный метод, поэтому он запускает обновление представления.

Вы объявили кнопки в свойстве data? 

data() {
     buttons:[]
}

Поскольку вы создаете активное свойство как i === 0, вам не нужен Vue.set.

Я не знаю, есть ли что-то сделать, но вместо того, чтобы сделать кнопки пустыми и затем нажать, используйте переменную aux для создания массива, а затем просто сделайте this.buttons = auxVariable. Это должно вызвать обновление.

...