Question

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

    while (end($jour_planning) !== "tuesday") {
        array_unshift($jour_planning, array_pop($jour_planning));
    }

在./partials/Log'中;

<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;      
            });
        }
    }
}

我如何向我的组件添加搜索，尝试使用计算属性，但还不能进行搜索。

有什么建议或想法吗？

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>

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

Vue添加搜索选项

1 个答案: