Vue.js 在动态表中搜索输入

我是Vue.js的新手，因此感谢您的帮助！！ 我试图为每个列实现一个搜索输入，为用户过滤结果

这是我的HTML文件：

    <div id="table"  >
        <div class=" container jumbotron mt-3 ">
            <enter-data :resources="resources" ></enter-data>
    
        </div>
        <div class=" container jumbotron  mt-1 ">
            <table-list :resources="resources" :heads="heads" ></table-list>
    
        </div>
    </div>

这是我的JS文件：

Vue.component('table-list', {
  props: ['resources', 'heads'],
  data () {
    return {

      selected: [],
      selectAll: true,
      userIds: [],
      searchQuery: ''

    }
  },

  computed: {
    filteredResources: function () {
      if (this.searchQuery) {
        return this.resources.filter(item => {
          // return this.item.value.toLowerCase().includes(this.searchQuery.toLowerCase());
          // return this.searchQuery.toLowerCase().split(' ').every(v => item.value.toLowerCase().includes(v))
          return this.item.FName.startsWith(this.searchQuery)
          // return item.indexOf(this.searchQuery)>= 0;
        })
      } else {
        return this.resources
      }
    }
  },
  methods: {
    sortTable: function (resource) {
      this.resources.sort(function (a, b) {
        if (a[resource.value] > b[resource.value]) {
          return 1
        } else if (a[resource.value] < b[resource.value]) {
          return -1
        }
        return 0
      })
    }

  },
  template: `
    <div class="w-100 text-center d-flex justify-content-center flex-wrap">
      <div class="w-75">
        <!--         <input type="text" placeholder="search.." v-modle="searchQuery" >-->
        <table class="table table-striped">
          <thead>
            <tr>
              <th>
                <input type="checkbox">
              </th>
              <th v-for="resource in heads" class="cursor" @click="sortTable(resource)">
                <div />
                {{ resource.name }}
              </th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td />
              <td />
              <td>
                <input v-mode="searchQuery" type="text">
              </td>
              <td>
                <input type="text">
              </td>
            </tr>
            <tr v-for="resource in filteredResources">
              <td>
                <input type="checkbox">
              </td>
              <td v-for="column in heads">
                {{ resource[column.value] }}
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      </div>
      </div>
    </div>
  `
})

var app = new Vue({
  el: '#table',
  data: {

    resources: [
      { 'id': 0, 'FName': 'Setareh', 'LName': 'Pashapour', 'Extra': 'Alishah' },
      { 'id': 1, 'FName': 'Soheil', 'LName': 'Pashapour' },
      { 'id': 2, 'FName': 'Simin', 'LName': 'Hajizadeh' },
      { 'id': 3, 'FName': 'Nouyan', 'LName': 'Arman' },
      { 'id': 4, 'FName': 'Abed', 'LName': 'Hamrang' },
      { 'id': 5, 'FName': 'Navid', 'LName': 'Ahanj' }
    ],
    heads: [{ name: '#', value: 'id' }, { name: 'First Name', value: 'FName' }, { name: 'Last Name', value: 'LName' }]

  }

})

Vue.component（'table-list'{
道具：['resources'，'heads'，]，
数据（）{
返回{
选定：[]，
selectAll:对，
用户标识：[]，
搜索查询：“”
}
},
计算：{
filteredResources:函数（）{
if（this.searchQuery）{
返回此.resources.filter（项=>{
//返回this.item.value.toLowerCase（）.includes（this.searchQuery.toLowerCase（））；
//返回此.searchQuery.toLowerCase（）.split（“”）.every（v=>item.value.toLowerCase（）.includes（v））
返回this.item.FName.startsWith（this.searchQuery）
//return item.indexOf（this.searchQuery）>=0；
})
}否则{
把这个还给我
}
}
},
方法：{
可排序：函数（资源）{
this.resources.sort（函数（a，b）{
如果（a[resource.value]>b[resource.value]）{
返回1
}else if（a[resource.value]

不幸的是，它不起作用 searchQuery数据对我计算的过滤器没有任何影响，如果我在上面键入任何内容，也不会发生任何事情

---

有什么建议吗？

表单输入绑定使用的指令名称错误。从

v-mode

更改为

v-model

，如下所示

<input v-mode="searchQuery" type="text">

---

我发现有什么地方不对。不确定是否是打字错误。模板最外部的元素名是

di

，它似乎是

div

。