Отображение различных всплывающих окон при нажатии элемента таблицы

Question

Я очень новичок в VueJS. Я пытаюсь заполнить таблицу. Один из столбцов - кнопка, при нажатии которой открывается модальное окно. Там может быть 3 разных типов модалов. Я попытался решить проблему следующим образом:

Я связал свой jsfiddle после этого ссылочного кода.

HTML

 <div id="app">

  <!-- Main table element -->
  <b-table striped hover :items="items" :fields="fields" >
    <template slot="name" slot-scope="item">
      {{item.value.first}} {{item.value.last}}
    </template>
    <template slot="isActive" slot-scope="item">
      {{item.value?'Yes :)':'No :('}}
    </template>
    <template slot="actions" slot-scope="item">
      <div v-if="item.item.age < 15">
        <b-btn v-b-modal.modal1 size="sm" @click="details(item.item)">Details</b-btn>
      </div>
      <div v-else-if="item.item.age > 26">
        <b-btn v-b-modal.modal2 size="sm"           @click="details(item.item)">Details</b-btn>        
      </div>
      <div v-else>
        <b-btn v-b-modal.modal3 size="sm"           @click="details(item.item)">Details</b-btn>
      </div>

    </template>
  </b-table>

  <b-modal id="modal1">
    modal 1
  </b-modal>

    <b-modal id="modal2">
    modal 2
  </b-modal>
  <b-modal id="modal3">
    modal3
  </b-modal>
</div>

VueJS

new Vue({
  el: '#app',
  data: {
    items: [{
      isActive: true,
      age: 40,
      name: {
        first: 'Dickerson',
        last: 'Macdonald'
      }
    }, {
      isActive: false,
      age: 21,
      name: {
        first: 'Larsen',
        last: 'Shaw'
      }

    }, {
      isActive: false,
      age: 9,
      state: 'success',
      name: {
        first: 'Mitzi',
        last: 'Navarro'
      }

    }, {
      isActive: false,
      age: 89,
      name: {
        first: 'Geneva',
        last: 'Wilson'
      }

    }, {
      isActive: true,
      age: 38,
      name: {
        first: 'Jami',
        last: 'Carney'
      }

    }, {
      isActive: false,
      age: 27,
      name: {
        first: 'Essie',
        last: 'Dunlap'
      }

    }, {
      isActive: true,
      age: 40,
      name: {
        first: 'Dickerson',
        last: 'Macdonald'
      }

    }, {
      isActive: false,
      age: 21,
      name: {
        first: 'Larsen',
        last: 'Shaw'
      }

    }, {
      isActive: false,
      age: 26,
      name: {
        first: 'Mitzi',
        last: 'Navarro'
      }

    }, {
      isActive: false,
      age: 22,
      name: {
        first: 'Geneva',
        last: 'Wilson'
      }

    }, {
      isActive: true,
      age: 38,
      name: {
        first: 'Jami',
        last: 'Carney'
      }

    }, {
      isActive: false,
      age: 27,
      name: {
        first: 'Essie',
        last: 'Dunlap'
      }

    }],
    fields: {
      name: {
        label: 'Person Full name',
        sortable: true
      },
      age: {
        label: 'Person age',
        sortable: true
      },
      isActive: {
        label: 'is Active'
      },
      actions: {
        label: 'Actions'
      }
    }
  },
  methods: {
    details(item) {
      //gets some data. Write 3 different functions to fetch data accordingly 
    }
  }
})

Стиль:

#app {
  padding: 20px;
  height: 500px;
}

Обновить:

Мне удалось воспроизвести ошибку, описанную ниже, после добавления нумерации страниц.

моя скрипка: скрипка

Чтобы повторить, перейдите на другую страницу и попробуйте открыть все модалы. Некоторые не откроются.

Наблюдение:

Я вижу, что могу открыть только один модал на страницу после перехода на другую страницу с начальной страницы.

Есть ли лучший способ сделать это? Или я что-то упускаю тривиально?

Описание ошибки:

Я сталкиваюсь со странным поведением в моем коде, когда большинство строк (кажется мне случайным) не открывают всплывающее окно при нажатии кнопки. Это происходит даже для того же модального типа

Например: предположим, что записи P,Q столбца имеют тип modal1. Нажатие на P открывает модальное, а нажатие на Q - нет.

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

Answer 1

Не могу объяснить, почему это происходит (возможно, это ошибка bootstrap-vue). Во всяком случае, если вы замените:

<b-btn v-b-modal.modal1 size="sm" @click="details(item.item)">Details</b-btn>
<b-btn v-b-modal.modal2 size="sm" @click="details(item.item)">Details</b-btn>
<b-btn v-b-modal.modal3 size="sm" @click="details(item.item)">Details</b-btn>

с:

<b-btn v-b-modal="'modal1'" size="sm" @click="details(item.item)">Details</b-btn>
<b-btn v-b-modal="'modal2'" size="sm" @click="details(item.item)">Details</b-btn>
<b-btn v-b-modal="'modal3'" size="sm" @click="details(item.item)">Details</b-btn>

кажется, работает нормально.

Надеюсь, это поможет вам.