Vue 项目报错 "TypeError: this.tableData.filter is not a function" 解决方法

<template>
  <div class='path-card right-path pointerBlock'>
    <div class='content'>
      <div class='item'>
        <div class='item-title'>
          发布终端运行状况
        </div>
        <div class='town-info pt-15'>
          <div class='chart' style='height: 200px;'>
            <chartRing :temDataList='temStatus'></chartRing>
          </div>
        </div>
      </div>
      <div class='item mt-15'>
        <div class='item-title flow-title'>发布终端管理列表</div>
        <div class='town-info pt-15'>
          <div class='search-box'>
            <el-input placeholder='请输入设备名称' prefix-icon='el-icon-search' v-model='input' @input='filterItems'>
            </el-input>
          </div>
          <div class='table-box transparent-table'>
            <el-table
                :data='filteredItems'
                height='620'
                style='width: 100%'
            >
              <el-table-column
                  label='终端名称'
                  align='center'
                  prop='name'
                  width='160'
              >
              </el-table-column>
              <el-table-column label='终端类型' align='center' width='60'>
                <template slot-scope='scope'>
                  <span v-if='scope.row.model == '1''>嵌入式</span>
                  <span v-if='scope.row.model == '2''>x86</span>
                  <span v-if='scope.row.model == '3''>安卓</span>
                </template>
              </el-table-column>
              <el-table-column label='状态' align='center' width='80'>
                <template slot-scope='scope'>
                  <span v-if='scope.row.status == '1'' style='color: sandybrown'>离线</span>
                  <span v-if='scope.row.status == '0''>未知</span>
                  <span v-if='scope.row.status == '2''>播放</span>
                  <span v-if='scope.row.status == '3''>下载</span>
                  <span v-if='scope.row.status == '6''>后台下载</span>
                  <span v-if='scope.row.status == '7''>异常</span>
                  <span v-if='scope.row.status == '8''>更新</span>
                  <span v-if='scope.row.status == '9''>登录</span>
                  <span v-if='scope.row.status == '11''>当天未登录</span>
                  <span v-if='scope.row.status == '12''>多天未登录</span>
                  <span v-if='scope.row.status == '14''>休眠</span>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>


import chartRing1 from '@/views/broadcast/chart/chartRing1.vue';
import chartRing from '@/views/broadcast/chart/chartRing.vue';

export default {
  name: 'teaching-path',
  components: {
    chartRing,
    chartRing1
  },
  data() {
    return {
      input: '',
      tableData: [
        {name: 'JDWDJ-12', state: '1', type: 'WINDOWS'},
        {name: 'JDWDJ-12', state: '1', type: 'WINDOWS'},
        {name: 'JDWDJ-12', state: '1', type: 'WINDOWS'},
        {name: 'JDWDJ-12', state: '0', type: 'WINDOWS'},
        {name: 'JDWDJ-12', state: '1', type: 'WINDOWS'},
        {name: 'JDWDJ-12', state: '1', type: 'WINDOWS'},
        {name: 'JDWDJ-12', state: '1', type: 'WINDOWS'},
        {name: 'JDWDJ-12', state: '1', type: 'WINDOWS'},
        {name: 'JDWDJ-12', state: '1', type: 'WINDOWS'},
        {name: 'JWDSADA-12', state: '0', type: 'WINDOWS'},
        {name: 'JDWDJ-12', state: '1', type: 'WINDOWS'},
        {name: 'JDWDJ-12', state: '1', type: 'WINDOWS'},
        {name: 'JDWDJ-12', state: '1', type: 'WINDOWS'},
        {name: 'JDWDJ-12', state: '1', type: 'WINDOWS'},
        {name: 'JDWDJ-12', state: '1', type: 'WINDOWS'},
        {name: 'JDWDJ-12', state: '1', type: 'WINDOWS'},
        {name: 'JDWDJ-13', state: '1', type: 'WINDOWS'},
        {name: 'JDWDJ-23', state: '1', type: 'WINDOWS'},
        {name: 'JDWDJ-33', state: '1', type: 'WINDOWS'},
        {name: 'JDWDJ-12', state: '1', type: 'WINDOWS'},
        {name: 'JDWDJ-12', state: '1', type: 'WINDOWS'},
        {name: 'JDWDJ-12', state: '1', type: 'WINDOWS'},
        {name: 'JDWDJ-12', state: '1', type: 'WINDOWS'},
        {name: 'JDWDJ-12', state: '1', type: 'WINDOWS'},
        {name: 'JDWDJ-12', state: '1', type: 'WINDOWS'},
        {name: 'JDWDJ-12', state: '1', type: 'WINDOWS'},
        {name: 'JDWDJ-12', state: '1', type: 'WINDOWS'},
        {name: 'JDWDJ-12', state: '1', type: 'WINDOWS'},
        {name: 'JDWDJ-12', state: '1', type: 'WINDOWS'},
        {name: 'JDWDJ-12', state: '1', type: 'WINDOWS'},
        {name: 'JDWDJ-12', state: '1', type: 'WINDOWS'},
        {name: 'JDWDJ-12', state: '1', type: 'WINDOWS'},
        {name: 'JDWDJ-12', state: '1', type: 'WINDOWS'},
        {name: 'JDWDJ-12', state: '1', type: 'WINDOWS'},
        {name: 'JDWDJ-12', state: '1', type: 'WINDOWS'},
        {name: 'JDWDJ-12', state: '1', type: 'WINDOWS'},
        {name: 'JDWDJ-12', state: '1', type: 'WINDOWS'},
        {name: 'JDWDJ-12', state: '1', type: 'WINDOWS'},
        {name: 'JDWDJ-12', state: '1', type: 'WINDOWS'},
        {name: 'JDWDJ-12', state: '1', type: 'WINDOWS'},
        {name: 'JDWDJ-12', state: '1', type: 'WINDOWS'},
        {name: 'JDWDJ-12', state: '1', type: 'WINDOWS'},
        {name: 'JDWDJ-12', state: '1', type: 'WINDOWS'},
        {name: 'JDWDJ-12', state: '1', type: 'WINDOWS'},
        {name: 'JDWDJ-12', state: '1', type: 'WINDOWS'},
        {name: 'JDWDJ-12', state: '1', type: 'WINDOWS'},
      ],
      temStatus: [
        {value: 50, name: '在线'},
        {value: 30, name: '离线'},
        {value: 10, name: '未使用'},
      ],
    };
  },
  mounted() {

  },
  computed: {
    //模糊查询
    filteredItems() {
      if (this.input === '') {
        return this.tableData;
      } else {
        return this.tableData.filter(item => {
          return item.name.toLowerCase().includes(this.input.toLowerCase());
        });
      }
    }
  },
  methods: {
    filterItems() {},
  },
};
</script>
<style scoped lang='less'>
@import '@/style/style-my';

.water-len {
  position: absolute;
  left: 55%;
  top: 15%;

  .len-item {
    display: flex;
    align-items: center;
    margin: 10px 0;

    .len-card {
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
    }

    span {
      margin: 0 6px;
    }
  }
}
</style>
<p>报错信息提示'this.tableData.filter is not a function'，意味着'this.tableData'不是一个数组，而是一个其他类型的数据。请检查'tableData'的值是否正确赋值为一个数组。</p>
<p>在代码中，'tableData'被赋值为一个包含多个对象的数组。确保没有其他地方修改了'tableData'的类型，导致它不再是一个数组。</p>
<p>另外，确保'filteredItems'计算属性中的过滤逻辑正确。可以通过在'filteredItems'中加入一些日志输出来调试：</p>
<pre><code class="language-javascript">filteredItems() {
  console.log(this.tableData);
  console.log(typeof this.tableData);
  if (this.input === '') {
    return this.tableData;
  } else {
    return this.tableData.filter(item =&gt; {
      return item.name.toLowerCase().includes(this.input.toLowerCase());
    });
  }
}
</code></pre>
<p>检查控制台输出的结果，确定'tableData'的类型是否正确。同时，也可以检查'tableData'是否为空，以及'item'对象中是否存在'name'属性。</p>
<p>如果问题仍然存在，请提供'tableData'的赋值代码以及可能修改'tableData'的其他地方的代码，以便更好地帮助解决问题。</p>