【发布时间】:2020-06-14 15:04:27
【问题描述】:
我是 vue.js 的新手。我有一个用 bootstrap-vue 生成的表,我想在单个列中进行过滤。我跟着这个答案“Bootstrap-vue b-table with filter in header”。但是我在控制台中得到“未捕获的 ReferenceError:Vue 未定义”,并且得到“模板根不允许 'v-for' 指令”。我无法解决它。
请帮帮我。
<div id="app">
<b-table striped show-empty :items="filtered">
<template slot="top-row" slot-scope="{ fields }">
<td v-for="field in fields" :key="field.key">
<input v-model="filters[field.key]" :placeholder="field.label">
</td>
</template>
</b-table>
</div>
<script>
new Vue({
el: '#app',
data: {
filters: {
id: '',
issuedBy: '',
issuedTo: ''
},
items: [{id:1234,issuedBy:'Operator',issuedTo:'abcd-efgh'},{id:5678,issuedBy:'User',issuedTo:'ijkl-mnop'}]
},
computed: {
filtered () {
const filtered = this.items.filter(item => {
return Object.keys(this.filters).every(key =>
String(item[key]).includes(this.filters[key]))
})
return filtered.length > 0 ? filtered : [{
id: '',
issuedBy: '',
issuedTo: ''
}]
}
}
})
</script>
【问题讨论】:
标签: vue.js