单击 table 元素时显示不同的弹出窗口

Question

我是 VueJS 的新手。我正在尝试填充 table。其中一列是单击打开模态的按钮。可以有 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;
}

更新：

添加分页后，我能够重现下面描述的错误。

我的 fiddle: fiddle

要复制，请转到其他页面并尝试打开所有模式。有的打不开

观察：

我发现当我从初始页面切换到不同的页面后，每页只能打开一个模式。

有更好的方法吗？还是我遗漏了一些微不足道的东西？

错误描述：

我运行在我的代码中遇到了一个奇怪的行为，其中大多数行（对我来说似乎是随机的）不会在按钮 clicked.This 发生时打开弹出窗口相同的模态类型

例如：假设列的 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>

它似乎工作正常。

希望对您有所帮助。

单击 table 元素时显示不同的弹出窗口

Showing different pop-ups on click of a table element

vue.js

bootstrap-vue