Question

vuejs 搜索过滤器“TypeError：无法读取 null 的属性‘filter’”

2019-03-07

1636

vue.js

我想在表格中按 tc 编号进行搜索。我利用了 https://element.eleme.io/#/en-US/component/table 。但是我得到了如下错误。

“TypeError: Cannot read property 'filter' of null”

我写的代码如下。

<template>
 <div class="app-container">
  <div class="filter-container">
   <el-input :placeholder="TC arama" v-model="search" style="width: 
     200px;" class="filter-item"/>
  </div>
  <el-table
   :data="list.filter(data => !search || 
    data.tc.toLowerCase().includes(search.toLowerCase()))"
   border
   fit
   highlight-current-row
   style="width: 100%;">
   <el-table-column :label="ID" prop="id" width="65"/>
   <el-table-column :label="TC" prop="tc" min-width="110px"/>
 </el-table>
</div>
</template>

<script>
export default {
    data() {
        return {
            filter: '',
            search: '',
            list: [{
                id: 1,
                tc: "12345678944"
            }, {
                id: 2,
                tc: "25639874532"
            }, {
                id: 3,
                tc: "23669874120"
            }]
        }
    }
}
</script>

Answer 1

您的代码中存在几个错误，请参考此代码。

fiddle - https://jsfiddle.net/9px5sba7/

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/lib/index.js"></script>
<div id="app">
<template>
  <el-table
    :data="tableData.filter(data => !search || data.tc.toLowerCase().includes(search.toLowerCase()))"  border
   fit
   highlight-current-row
    style="width: 100%">
    <el-table-column
      label="Id"
      prop="id">
    </el-table-column>
    <el-table-column
      label="Tc"
      prop="tc">
    </el-table-column>
    <el-table-column
      align="right">
      <template slot="header" slot-scope="scope">
        <el-input
          v-model="search"
          size="mini"
          placeholder="Type to search"/>
      </template>

    </el-table-column>
  </el-table>


  <div class="filter-container">
   <el-input placeholder="TC arama" v-model="search" style="width: 
     200px;" class="filter-item"/>
  </div>

  <el-table
   :data="tableData.filter(data => !search || 
    data.tc.toLowerCase().includes(search.toLowerCase()))"
   border
   fit
   highlight-current-row
   style="width: 100%;">
   <el-table-column label="ID" prop="id" width="65"/>
   <el-table-column label="TC" prop="tc" min-width="110px"/>
 </el-table>

</template>
</div>



var Main = {
    data() {
      return {
        tableData: [{
          id: 1,
          tc: "1233",
        },{
          id: 1,
          tc: "234",
        }],
        search: '',
      }
    },
    methods: {
      handleEdit(index, row) {
        console.log(index, row);
      },
      handleDelete(index, row) {
        console.log(index, row);
      }
    },
  }
var Ctor = Vue.extend(Main)
new Ctor().$mount('#app')