【发布时间】：2018-09-24 16:43:38
【问题描述】：
我对 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;
}
更新：
添加分页后，我能够复制下面描述的错误。
我的小提琴：fiddle
要进行复制，请转到其他页面并尝试打开所有模式。有些打不开。
观察：
我发现在从初始页面切换到不同页面后，我每页只能打开一个模式。
有没有更好的方法来做到这一点？还是我错过了一些琐碎的事情？
错误描述：
我在我的代码中遇到了一个奇怪的行为，其中大多数行（对我来说似乎是随机的）在单击按钮时没有打开弹出窗口。即使对于相同的模式类型也会发生这种情况
例如：假设列的 P,Q 条目是 modal1 类型。单击 P 会打开一个模态，而单击 Q 则不会。
我知道这个错误看起来很模糊，但如果有人能指出我正确的方向，我会非常高兴。谢谢。
【问题讨论】：
标签： vue.js bootstrap-vue