首页 > 解决方案 > 属性'toLowerCase'和'includes'错误Vue.js vuetify

问题描述

我试图在 vuetify 数据表上实现多个过滤器,一切正常,直到验证搜索的方法显示以下错误

在此处输入图像描述

在此处输入图像描述

模板:

<v-container fluid>
  <v-row>
    <v-col cols="6">
      <v-row class="pa-6">
        <!-- Filter for dessert name-->
        <v-text-field v-model="contactoFilterValue" type="text" label="Contacto"></v-text-field>
      </v-row>
    </v-col>

    <v-col cols="6">
      <v-row class="pa-6">
        <!-- Filter for calories -->
        <v-select
                :items="empresaLists"
                item-text="nombre" item-value="nombre"
                v-model="empresaFilterValue"
                label="Empresa"
        ></v-select>
      </v-row>
    </v-col>
  </v-row>
</v-container>

脚本:

data: () => ({
  contactoFilterValue: '',
  empresaFilterValue: null,
},

computed: { 
  headers(){
    return[
    {text: '', value: 'viewmore', sortable: false },
    {text: 'Empresa',align: 'start',value: 'empresa', filter: this.empresaFilter,},
    {text: 'Contacto',value: 'contacto', filter: this.contactoFilter,},
    {text: 'Actions', value: 'actions', sortable: false },
  ]},
},
    
methods: { 
      contactoFilter(value) {
        if (!this.contactoFilterValue) {
          return true;
        }
        return value.toLowerCase().includes(this.contactoFilterValue.toLowerCase());
      },
      empresaFilter(value) {
        if (!this.empresaFilterValue) {
          return true;
        }
        return value === this.empresaFilterValue;
      },
    }

这条线似乎没有正常工作,有没有人知道解决方案?

返回值.toLowerCase().includes(this.contactoFilterValue.toLowerCase());

标签: laravelvue.jsvuetify.js

解决方案


在这一行中,您设置filter为 function contactoFilter,但您不提供参数value

 {text: 'Contacto',value: 'contacto', filter: this.contactoFilter,},

我不确定你的意图是什么。要么提供类似的值,this.contactoFilter('foo')要么使用不同的变量分配为filter.


推荐阅读