Answer the question
In order to leave comments, you need to log in
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 questionAsk a Question
731 491 924 answers to any question