Vue 添加一个搜索选项

Question

在我当前的组件中，我需要添加一个搜索选项，我有以下内容：

<log
v-for="log in logs"
:log="log"
:key="log.id">
</log>
import Log from './partials/Log';
export default {
components: {
Log
},
data() {
return {
logs: []
}
},
mounted() {
this.fetchLogs();
},
methods: {
fetchLogs() {
axios.get('/api/logs/').then((res) => {
this.logs= res.data.data;      
});
}
}
}

在 ./部分/日志';

<template>
<div class="media">
<p>{{ log.name  }}</p>
</div>
</template>
<script>
export default {
props: ['log']
}
</script>

如何向我的组件添加搜索，尝试使用计算属性但尚无法成功。

有什么建议或想法吗？

Answer 1

import Log from './partials/Log';
export default {
components: {
Log
},
data() {
return {
logs: [],
logFilterWord: ""
}
},
computed: {
filteredlogs: function()
{
return this.logs.filter(test => {return test.name.toLowerCase().includes(this.logFilterWord.toLowerCase())})
}
}
mounted() {
this.fetchLogs();
},
methods: {
fetchLogs() {
axios.get('/api/logs/').then((res) => {
this.logs= res.data.data;      
});
}
}
}

Filter: <input v-model="logFilterWord"/>
<log
v-for="log in filteredlogs"
:log="log"
:key="log.id">
</log>

复制代码并请尝试一下，我在工作中，所以我目前无法调试它。