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

In ./partials/Log';

<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>

Скопируйте код и попробуйте его, пожалуйста, я на работе, поэтому я не могу отладить его в настоящее время.