过滤含vue-mc模型的数组时属性访问报错，求解决方案

我太懂你碰到的这个坑了！vue-mc 的模型实例可不是普通的 JavaScript 对象，它的属性并没有直接暴露在实例本身上，所以你直接用 item.name 去访问自然会得到 undefined，进而触发 Cannot read property 'toLowerCase' 的错误。

正确的属性访问方式 #

vue-mc 提供了专门的方法来获取模型属性——get() 方法，你可以通过它安全地获取模型中的属性值。修改你的计算属性代码如下：

computed: { 
  filtered_items:function() { 
    const self = this; 
    return this.local_items.filter(function(item) { 
      // 用get方法获取name属性，同时做空值处理避免报错
      const itemName = item.get('name') || '';
      return itemName.toLowerCase().indexOf(self.user_input.toLowerCase()) >= 0; 
    }); 
  } 
}

额外提示 #

如果你的 vue-mc 版本支持，也可以通过模型实例的 $data 属性直接访问底层数据对象，比如 item.$data.name，不过官方更推荐使用 get() 方法，因为它会处理属性默认值、类型转换等逻辑，更符合 vue-mc 的设计规范。

另外，加上 || '' 的空值处理是为了防止 name 属性本身为 null 或 undefined 的情况，避免再次触发类似的报错。

内容的提问来源于stack exchange，提问作者Tarvo Mäesepp