petritr's avatar
Level 15

Problem with search vue

I have problem with the search when i add pagination in vue:

<input class="search ml-2" type="search" placeholder="Search" v-model="searching">
    <log
        v-for="log in logs"
        :log="log"
        :key="log.id">
    </log>
 <pagination
    :meta_data="meta_data"
    v-on:next="fetchLogs">
 </pagination>

I have the scripts like:


    import Log from './partials/Log';
    import Pagination from './pagination/Pagination';

    export default {

        components: {
            Log,
            Pagination
        },

        data() {
            return {
                logs: [],
                searching: '',
                meta_data: {
                    last_page: null,
                    current_page: 1,
                    prev_page_url: null
                }
            }
        },
        mounted() {
            this.fetchLogs();
        },
        computed: {
            logs: function () {
                return this.logs.filter((log) => {
                    return log.properties.hub_name.toLowerCase().includes(this.searching.toLowerCase());
                })
            }
        },
        methods: {
            fetchLogs(page = 1) {
                axios.get('/api/logs', {
                    params: {
                        page
                    }
                }).then((res) => {
                    this.logs = res.data.data;
                    this.meta_data.last_page = res.data.last_page;
                    this.meta_data.current_page = res.data.current_page;
                    this.meta_data.prev_page_url = res.data.prev_page_url;
                });
            }
        }
    }

i get an error: [Vue warn]: The computed property "logs" is already defined in data. What im missing here ?

0 likes
3 replies
Robstar's avatar

Vue doesn't like the fact you have a logs variable set within data() and as a computed property.

petritr's avatar
Level 15

i got that, any ideas for a possible solution ?

Robstar's avatar

Choose the best way to access that data. Don't use both :) It's up to you.

Please or to participate in this conversation.