T
T
Tweak_stack2018-08-28 00:24:06
Vue.js
Tweak_stack, 2018-08-28 00:24:06

How to filter all pages in vuejs?

Only the first page is filtered, everything is needed here is the API
code

{
current_page: 1,
data: [
{
id: 1,
category: "Стойки",
subcategory: "Трубки",
article: "123",
name: "Стойкаasdfas",
year: "2018",
desc: "Стойка рисор",
created_at: null,
updated_at: null,
},
{
id: 2,
category: "Стойки",
subcategory: "Трубки",
article: "456",
name: "Стойка",
year: "2018",
desc: "Стойка рисор",
created_at: null,
updated_at: null,
},
{
id: 3,
category: "Стойки",
subcategory: "Трубки",
article: "789",
name: "Стойка",
year: "2018",
desc: "Стойка рисор",
created_at: null,
updated_at: null,
},
{
id: 4,
category: "Стойки",
subcategory: "Трубки",
article: "101",
name: "Стойка",
year: "2018",
desc: "Стойка рисор",
created_at: null,
updated_at: null,
},
{
id: 5,
category: "Стойки",
subcategory: "Трубки",
article: "202",
name: "Стойка",
year: "2018",
desc: "Стойка рисор",
created_at: null,
updated_at: null,
},
],
first_page_url: "http://localhost:8888/search/API/parts?page=1",
from: 1,
last_page: 2,
last_page_url: "http://localhost:8888/search/API/parts?page=2",
next_page_url: "http://localhost:8888/search/API/parts?page=2",
path: "http://localhost:8888/search/API/parts",
per_page: "5",
prev_page_url: null,
to: 5,
total: 6,
}

<template>
    <div class="content">
        <div class="title m-b-md">
            <img class="logotype" src="/image/heavy-machinery.png" alt="">
        </div>


        <ul class="pagination">
            <li v-bind:class="[{disabled: !pagination.prev_page}]" class="page-item">
                <a @click="fetchParts(pagination.prev_page)" href="#" class="page-link">Предыдущая</a>
            </li>


            <li v-bind:class="[{disabled: !pagination.next_page}]" class="page-item">
                <a @click="fetchParts(pagination.next_page)" href="#" class="page-link">Следующая</a>
            </li>
        </ul>


        <div class="container">
            <div class="well">
                <form class="form-inline">
                    <input type="text" class="form-control" placeholder="По артиклю" v-model="search">
                </form>
            </div>
        </div>

        <div v-for="part in filteredParts" v-bind:key="part.artilce"  class="links d-flex flex-row w-100">
            <li class="d-flex">{{ part.id }}</li>
            <li class="d-flex">{{ part.article }}</li>
            <li class="d-flex">{{ part.name }}</li>
            <li class="d-flex">{{ part.desc }}</li>
            <li class="d-flex">{{ part.year }}</li>
        </div>
        <ul class="pagination">
            <li class="page-item disabled">
                <a href="" class="link-page text-dark">
                    Страница {{ pagination.current_page }}
                </a>
            </li>
        </ul>

    </div>
</template>

<script>
    export default {
        data() {
            return {
                search: '',
                parts: [],
                part: {
                    id: '',
                    category: '',
                    subcategory: '',
                    article: '',
                    name: '',
                    year: '',
                    desc: '',
                    images: ''
        },
                first_page: '',
                last_page: '',
                part_id: '',
                pagination: {},
                edit: false,
                created() {}
            };

        },

        created() {
            this.fetchParts();
        },

        methods: {
            fetchParts(page_url) {
                let vm = this;
                page_url = page_url || '/search/API/parts'
                fetch(page_url)
                    .then(res => res.json())
                    .then(res => {
                        this.parts = res.data;
                        vm.makePagination(res.first_page_url, res.last_page_url, res.next_page_url, res.prev_page_url, res.current_page);
                    })
                    .catch(err => conlose.log(err));
            },
            makePagination(first_page_url, last_page_url, next_page_url, prev_page_url, current_page) {
                let pagination =  {
                    first_page: first_page_url,
                    last_page: last_page_url,
                    next_page: next_page_url,
                    prev_page: prev_page_url,
                    current_page: current_page
                };

                this.pagination = pagination;
            },
        },

        computed: {
            filteredParts: function () {
                return this.parts.filter((part) => {
                    return console.log(part.article.match(this.search));
                })
            }
        }
    }
</script>

Answer the question

In order to leave comments, you need to log in

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question