Vue.js 通过Axios接收的列表中的Vue2搜索

由于过滤比Vue 1复杂得多，我有一个问题

这是我的组件，其中显示了一个羊的列表，带有搜索/筛选姓名或族的选项。 但我不知道如何才能做到这一点

<input type="search" v-model="search" placeholder="Search for Name OR Family" />
<ul>
    <li v-for="sheep in sheeps"> <!-- Tried also: 'sheep in filteredSheeps' -->
        {{ sheep.name }} ({{ sheep.type }}/{{ sheep.family }} )
    </li>
</ul>
<script>
import axios from 'axios';
export default {
    data() {
            return {
                sheeps: [],
                search: '',
            };
        },
        mounted() {
            this.getSheeps();
        }
        methods: {
            getSheeps() {
                var self = this;
                const url = '/api/sheeps';
                axios.get(url).then(function(response) {
                    self.sheeps = response.data;
                });
            },
        },
        computed: {
            filteredSheeps: function() {
                var self = this;
                return this.sheeps.filter(function(item) {
                    return item.family.toLowerCase().indexOf(self.search.toLowerCase()) > -1
                })
            }
        }
    }
}
</script>

{{sheep.name}}（{{sheep.type}}/{{sheep.family}）


从“axios”导入axios；
导出默认值{
数据（）{
返回{
绵羊：[]，
搜索：“”，
};
},
安装的（）{
这个。getSheeps（）；
}
方法：{
getSheeps（）{
var self=这个；
const url='/api/sheeps'；
get（url）.then（函数（响应）{
self.sheeps=response.data；
});
},
},
计算：{
filteredSheeps:function（）{
var self=这个；
返回此.sheeps.filter（函数（项）{
return item.family.toLowerCase（）.indexOf（self.search.toLowerCase（））>-1
})
}
}
}
}

我认为它需要

v-for

中的计算方法

filteredSheeps

，但也不是这样。然后直接获取错误：

---

TypeError:null不是一个对象（评估'item.family.toLowerCase'）”

这里有一个计算值，它可以防止未填充

族和/或
名称的情况

filteredSheeps: function() {
  let searchTerm = (this.search || "").toLowerCase()
  return this.sheeps.filter(function(item) {
    let family = (item.family || "").toLowerCase() 
    let name = (item.name || "").toLowerCase()
    return family.indexOf(searchTerm) > -1 || name.indexOf(searchTerm) > -1
  })
}

这是一个有效的例子


console.clear（）
常数羊=[
{姓名：“莉莉”，字体：“多珀”，家族：“家族1”}，
{姓名：“乔”，字体：“美利奴”，家族：“家族2”}，
{name:“Bob”，键入：“Dorper”，family:null}，
]
新Vue({
el:“应用程序”，
数据：{
绵羊：[]，
搜索：空
},
计算：{
filteredSheeps:function（）{
让searchTerm=（this.search | |“”）.toLowerCase（）
返回此.sheeps.filter（函数（项）{
let family=（item.family | |“”）.toLowerCase（）
让name=（item.name | |“”）.toLowerCase（）
return family.indexOf（searchTerm）>-1 | | name.indexOf（searchTerm）>-1
})
}
},
创建（）{
setTimeout（（）=>this.sheeps=sheeps，500）
}
})



{{sheep.name}}（{{sheep.type}}/{{sheep.family}）


这是一个计算程序，它可以保护您免受未填充
系列和/或
名称的情况

filteredSheeps: function() {
  let searchTerm = (this.search || "").toLowerCase()
  return this.sheeps.filter(function(item) {
    let family = (item.family || "").toLowerCase() 
    let name = (item.name || "").toLowerCase()
    return family.indexOf(searchTerm) > -1 || name.indexOf(searchTerm) > -1
  })
}

这是一个有效的例子


console.clear（）
常数羊=[
{姓名：“莉莉”，字体：“多珀”，家族：“家族1”}，
{姓名：“乔”，字体：“美利奴”，家族：“家族2”}，
{name:“Bob”，键入：“Dorper”，family:null}，
]
新Vue({
el:“应用程序”，
数据：{
绵羊：[]，
搜索：空
},
计算：{
filteredSheeps:function（）{
让searchTerm=（this.search | |“”）.toLowerCase（）
返回此.sheeps.filter（函数（项）{
let family=（item.family | |“”）.toLowerCase（）
让name=（item.name | |“”）.toLowerCase（）
return family.indexOf（searchTerm）>-1 | | name.indexOf（searchTerm）>-1
})
}
},
创建（）{
setTimeout（（）=>this.sheeps=sheeps，500）
}
})



{{sheep.name}}（{{sheep.type}}/{{sheep.family}）


您放入
sheeps
属性的ajax响应返回的对象之一没有
family
属性，或者
family
属性为空。您放入
sheeps
属性的ajax响应返回的对象之一没有
family
属性，或者
family
属性为空。太好了！但这只搜索family，我也想搜索Name。顺便问一下，为什么超时@bert@user1469734超时只是为了模拟ajax调用，因为我没有返回sheep的端点。我已更新以包含名称。太好了！但这只是对family的搜索，我想搜索还有名字。顺便问一下，为什么要暂停@bert@user1469734超时只是为了模拟ajax调用，因为我没有返回sheep的端点。我已更新以包含名称。