如何使用输入字段过滤引导Vue表

Question

标题说明了一切。我想用输入框过滤我的引导表。

这是我的。html组件的一部分：

<b-table
:items="Table"
:fields="fields"
striped
small
>

</b-table>

这里是。vue文件

<template src="./jointable.component.html"> </template>
<style scoped src="./jointable.component.css"> </style>


<script>

import axios from 'axios'

export default {
    name: 'jointable',
    data(){
        return {
            Table: [],
            fields: [
                {key: 'client_id', label: "School Code", sortable: true},
                {key: 'client_name', sortable: true},
                {key: 'uuid', label: "ID", sortable: true},
                {key: 'step', label: "Job Running", sortable: true},
                {key: 'serverid', sortable: true},
                {key: 'create_timestamp', label: "Job Start", sortable: true},
                {key: 'time_elapsed', sortable: true},
                {key: 'wh_db_host', sortable: true}
            ]
        }
    },
    methods : {
        loadData: function(){
            axios.get("http://192.168.56.101:5000/jointable")
            .then((res) => {
                this.Table = res.data
            })
            .catch((err) => {
                console.log(err)
            })
        }
    },
    mounted() {
        this.loadData();

        setInterval(function(){
            this.loadData()
        }.bind(this), 10000)
    },
    computed() {

    }
}
</script>

所以现在您可以看到我的脚本每10秒用更新的数据重新加载表一次。这可以。我现在也想让我的表可搜索/可过滤。我知道我必须使用计算出的东西，但如何使用它。

谢谢任何帮助我的人！

Answer 1

这是您要寻找的吗？

new Vue({
  el: "#app",
  data: {
  Items: [
  {Name: 'Lorem ipsum'},
  {Name: 'consectetur'},
  {Name: 'adipisicing.'}
  ],
  search: ''
  },
  computed: {
  filteredItems() {
  return this.Items.filter(item => item.Name.toLowerCase().includes(this.search.toLowerCase()))
  }
  }
})

.item {
  border: solid black 2px;
  padding: 10px;
  margin: 10px;
}

.search {
  border: solid black 2px;
  padding: 10px;
  margin: 10px;
}
p {
    padding: 10px;
}

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
<p>Found {{filteredItems.length}} items</p>
  <input class="search" type="text" placeholder="Search" v-model="search">
  <div class="item" v-for="item in filteredItems">{{item.Name}}</div>
</div>