带有 nuxt 的 wordpress rest api 上的累积过滤器
Cumulative filters on wordpress rest api with nuxt
我是 vue.js 的新手，我正在尝试做这样的事情：https://appendto.com/2017/05/building-tutorial-search-app-vue/
但是使用 nuxt.js 并从 wordpress rest api.
获取数据
到目前为止，我设法制作了一个基于 wordpress 菜单的动态菜单，以及用于页面和自定义 post 类型的动态 url。
我有一个页面列出了自定义 post 类型（专家），并且在该页面中
我希望能够通过文本搜索和按类别过滤那些 post 类型。
问题 1
文本搜索在下面的代码中运行良好。如果我键入一个字母或一个单词，下面的列表会相应减少（我设法通过 API 列出了 posts 类型）。但是，如果我清空文本输入，列表将保持过滤状态，我不知道为什么...我通过将 axios 调用的 return 存储到另一个变量 (orig) 中的 post 类型来解决这个问题我在 filterExpertes 方法中使用它，但我不确定这是一个好习惯......
问题 2
我设法基于 wordpress rest api 动态构建复选框列表并使用 vue 开发工具，我可以看到我选择的变量在我进行选择时得到更新。尽管如此，只要选中一个框，列表就会变空。
在 wordpress 方面，我安排其余响应包括这样的 post 类型类别（代码 returned 如果我转到我的自定义 post 类型端点 http://lesexpertes.test/wp-json/wp/v2/experte（axios 请求的结果）
[
{
"id": 120,
"date": "2018-03-29T10:02:01",
"date_gmt": "2018-03-29T08:02:01",
"guid": {
"rendered": "http://lesexpertes.test/experte/aperiam-itaque-enim-omnis/"
},
"modified": "2018-03-29T18:03:23",
"modified_gmt": "2018-03-29T16:03:23",
"slug": "julia",
"status": "publish",
"type": "experte",
"link": "http://lesexpertes.test/experte/julia/",
"title": {
"rendered": "Julia"
},
"content": {
"rendered": "<h2>Nemo aut fuga ad voluptatem placeat aliquam quia. Voluptatibus nihil dolorem assumenda repellat ipsum excepturi possimus. Dolorem optio blanditiis eius rem distinctio id eveniet</h2>\n<p>Veritatis odit <a title=\"Excepturi consequatur pariatur quisquam voluptas.\" href=\"http://www.quigley.info/natus-et-cupiditate-repudiandae-illum-et\">et quos quaerat. Deserunt qui in</a> pariatur libero atque. Aperiam sint consectetur deserunt necessitatibus. Laboriosam sunt facilis qui beatae. Qui dignissimos quia dolores. Dolores molestiae ullam id. Temporibus ut autem fugiat <a title=\"Possimus.\" href=\"http://williamson.info/\">modi aut sed soluta.</a> eligendi modi corrupti necessitatibus unde libero alias Repudiandae delectus fugiat ea quos dolorum quasi dolorem Porro delectus dolore iure explicabo. Rerum blanditiis <a title=\"Quaerat eos dicta facilis.\" href=\"http://www.heaney.com/soluta-exercitationem-qui-quaerat-et-quo-nostrum.html\">quam consequatur maxime</a> Et rerum aliquam natus sequi sed. Deserunt consequuntur quo quos earum est. Neque officiis explicabo nihil eum. Eaque porro perspiciatis voluptas animi eveniet. sint quibusdam ut Voluptatem dolores quidem consequatur unde. Omnis <a title=\"Distinctio non numquam.\" href=\"http://www.cruickshank.com/vitae-quia-laborum-harum-ipsam-tempore-enim\">dolore quas ipsum ut quasi. Autem</a> <a title=\"Odio quas similique.\" href=\"http://www.johnson.org/ut-aspernatur-eum-recusandae-voluptatem-tempora-rerum\">incidunt vero fuga</a> magnam magnam. Laudantium ratione impedit consequatur. Nemo veniam ipsam reiciendis in. Rerum labore magni dicta saepe doloremque laudantium. Voluptatem eos qui sit aut voluptas eveniet. Numquam et accusamus nisi dolorem. Vel porro vitae sint hic. Ut nam quam aut <a title=\"Consequatur ullam magni aliquam quo error voluptas.\" href=\"http://www.boyle.biz/qui-aut-aperiam-inventore-omnis-accusantium.html\">autem esse eum.</a></p>\n",
"protected": false
},
"author": 1,
"featured_media": 121,
"template": "",
"categories": [
11,
10
],
"langue": [
],
"better_featured_image": {
"id": 121,
"alt_text": "",
"caption": "",
"description": "",
"media_type": "image",
"media_details": {
"width": 300,
"height": 300,
"file": "2018/03/e9c4f864-3555-3e8c-b0f7-73f9d4d74348.jpg",
"sizes": {
"thumbnail": {
"file": "e9c4f864-3555-3e8c-b0f7-73f9d4d74348-150x150.jpg",
"width": 150,
"height": 150,
"mime-type": "image/jpeg",
"source_url": "http://lesexpertes.test/wp-content/uploads/2018/03/e9c4f864-3555-3e8c-b0f7-73f9d4d74348-150x150.jpg"
}
},
"image_meta": {
"aperture": "0",
"credit": "",
"camera": "",
"caption": "",
"created_timestamp": "0",
"copyright": "",
"focal_length": "0",
"iso": "0",
"shutter_speed": "0",
"title": "",
"orientation": "0",
"keywords": [
]
}
},
"post": 120,
"source_url": "http://lesexpertes.test/wp-content/uploads/2018/03/e9c4f864-3555-3e8c-b0f7-73f9d4d74348.jpg"
},
"acf": {
"nom": "Watson",
"prenom": "Julia",
"telephone": "022 733 40 31",
"courriel": "julia@banquise.ch",
"formation": "<p>Université de Genève – Master en Ecologie</p>\n"
},
"cats": [
{
"term_id": 11,
"name": "Ecologie",
"slug": "ecologie",
"term_group": 0,
"term_taxonomy_id": 11,
"taxonomy": "category",
"description": "",
"parent": 0,
"count": 23,
"filter": "raw",
"cat_ID": 11,
"category_count": 23,
"category_description": "",
"cat_name": "Ecologie",
"category_nicename": "ecologie",
"category_parent": 0
},
{
"term_id": 10,
"name": "Technologies",
"slug": "technologies",
"term_group": 0,
"term_taxonomy_id": 10,
"taxonomy": "category",
"description": "",
"parent": 0,
"count": 26,
"filter": "raw",
"cat_ID": 10,
"category_count": 26,
"category_description": "",
"cat_name": "Technologies",
"category_nicename": "technologies",
"category_parent": 0
}
],
"_links": {
"self": [
{
"href": "http://lesexpertes.test/wp-json/wp/v2/experte/120"
}
],
"collection": [
{
"href": "http://lesexpertes.test/wp-json/wp/v2/experte"
}
],
"about": [
{
"href": "http://lesexpertes.test/wp-json/wp/v2/types/experte"
}
],
"author": [
{
"embeddable": true,
"href": "http://lesexpertes.test/wp-json/wp/v2/users/1"
}
],
"wp:featuredmedia": [
{
"embeddable": true,
"href": "http://lesexpertes.test/wp-json/wp/v2/media/121"
}
],
"wp:attachment": [
{
"href": "http://lesexpertes.test/wp-json/wp/v2/media?parent=120"
}
],
"wp:term": [
{
"taxonomy": "category",
"embeddable": true,
"href": "http://lesexpertes.test/wp-json/wp/v2/categories?post=120"
},
{
"taxonomy": "langue",
"embeddable": true,
"href": "http://lesexpertes.test/wp-json/wp/v2/langue?post=120"
}
],
"curies": [
{
"name": "wp",
"href": "https://api.w.org/{rel}",
"templated": true
}
]
}
},
{
"id": 84,
"date": "2018-03-29T09:33:04",
"date_gmt": "2018-03-29T07:33:04",
"guid": {
"rendered": "http://lesexpertes.test/experte/qui-et-similique-deleniti-sint-exercitationem/"
},
"modified": "2018-03-29T09:33:04",
"modified_gmt": "2018-03-29T07:33:04",
"slug": "qui-et-similique-deleniti-sint-exercitationem",
"status": "publish",
"type": "experte",
"link": "http://lesexpertes.test/experte/qui-et-similique-deleniti-sint-exercitationem/",
"title": {
"rendered": "Qui et similique deleniti sint exercitationem"
},
...
这是我的代码：
index.vue
<template>
<div>
<main role="main">
<section class="jumbotron text-center">
<SearchBox v-model="searchTerm" />
<RadioGroup v-model="selected" />
<ExpertesList :expertes="expertes" />
</section>
</main>
</div>
</template>
<script>
import axios from 'axios'
import ExpertesList from '@/components/ExpertesList'
import SearchBox from '@/components/SearchBox'
// import Pagination from '@components/Pagination'
import RadioGroup from '@/components/RadioGroup'
export default {
components: {
ExpertesList,
SearchBox,
RadioGroup
},
asyncData(context) {
return axios.get('http://lesexpertes.test/wp-json/wp/v2/experte')
.then(res => {
return {
expertes: res.data,
orig: res.data
}
})
.catch(e => context.error(e))
},
data() {
return {
searchTerm: '',
selected: ''
// expertes: ''
}
},
computed: {
result() {
return this.orig
}
},
watch: {
searchTerm: function () {
this.filterExpertes()
},
selected: function () {
this.filterExpertes()
}
},
methods: {
filterExpertes: function () {
const searchTerm = this.searchTerm.toLowerCase()
const selected = this.selected
let result = this.result
if (searchTerm) {
result = result.filter(experte => {
return (
experte.title.rendered.toLowerCase().search(searchTerm) >= 0
// ||
//experte.description.toLowerCase().search(searchTerm) >= 0
)
})
}
if (selected) {
// result = result.filter(experte => {
// return (
// experte.categories.indexOf(selected) >= 0
// )
// })
result = result.filter(experte => experte.categories.indexOf(selected) >= 0)
}
this.expertes = result
//this.page = 1
}
},
created: function () {
this.filterExpertes()
}
}
</script>
RadioGroup.vue
<template>
<div>
<!-- <b-form-group label="Catégories:">
<b-form-checkbox-group id="checkboxes2" name="flavour2" v-model="selected">
<b-form-checkbox v-for="cat in cats" :value="cat.id">{{cat.name}}</b-form-checkbox>
</b-form-checkbox-group>
</b-form-group> -->
<div v-for="cat in cats">
<input type="checkbox" :value="cat.id" v-model="selected">
<label >{{cat.name}}</label>
</div>
<hr>
<div>Selected:
<strong>{{ selected }}</strong>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: 'RadioGroup',
mounted: function () {
//console.log( wp.api.collections );
this.getCats();
},
data() {
return {
cats: '',
selected: []
//
}
},
methods: {
getCats: function () {
const vm = this;
axios.get('http://lesexpertes.test/wp-json/wp/v2/categories')
.then((res2) => {
vm.cats = res2.data;
})
.catch((res2) => {
//console.log( `Something went wrong : ${ res }` );
});
}
},
watch: {
selected: function (val) {
this.$emit('input', val)
}
}
}
</script>
ExpertesList.vue
<template>
<div>
<ul>
<li v-for="experte in expertes">
{{experte.title.rendered}} - {{experte.categories}}
</li>
</ul>
</div>
</template>
<script>
//import Experte from '@/components/Experte'
export default {
name: 'ExpertesList',
//components: { Experte },
props: ['expertes']
}
</script>
SearchBox.vue
<template>
<div class="form-group has-feedback">
<input type="search" class="form-control input-lg" v-model="searchTerm"
placeholder="Search the title/description" :name="name">
<span class="glyphicon glyphicon-search form-control-feedback" aria-hidden="true"></span>
</div>
</template>
<script>
export default {
props: {
value: {
default: ''
},
name: {
default: ''
}
},
data: function() {
return { searchTerm: this.value }
},
watch: {
value: function(val) {
this.searchTerm = val
},
searchTerm: function(val) {
this.$emit('input', val)
}
}
}
</script>
欢迎任何帮助/提示...
我没有在您的 fiddle 中看到问题 #1，但这是第二个问题的解决方案：
new Vue({
el: '#app',
data: {
searchQuery: '',
items: [],
cats: [{
id: 2672,
name: "Autre",
slug: "autre",
taxonomy: "category",
checked: false,
},
{
id: 25,
name: "Culture",
slug: "culture",
taxonomy: "category",
checked: false,
},
],
},
computed: {
checkedIds() {
return Object.assign({}, ...this.cats
.filter(el => el.checked)
.map(el => ({
[el.id]: true
})));
},
filteredItems() {
return this.items.filter((item) => {
return (
item.title.rendered.indexOf(this.searchQuery) !== -1 &&
item.categories.filter(el => this.checkedIds[el]).length > 0
);
});
},
},
created: function() {
const that = this
axios.get('https://lecourrier.ch/wp-json/wp/v2/posts')
.then(function(response) {
that.items = response.data
});
},
});
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="app">
<input type="search" placeholder="Search" v-model="searchQuery">
<div v-for="cat in cats">
<input type="checkbox" :value="cat.id" v-model="cat.checked">
<label>{{cat.name}} - cat_id: {{cat.id}}</label>
</div>
<ul>
<li v-for="item in filteredItems" :key="item.id">{{ item.title.rendered }} - cat_id: {{item.categories}}</li>
</ul>
</div>
除了按查询字符串过滤外，您还需要跟踪所选类别。您可以通过在输入上使用 v-model 指令来实现。然后您可以创建一个选定 ID 的地图（查看 checkedIds）并使用它过滤您的项目。
P.S。使用箭头函数来避免写 var that = this。箭头函数没有它自己的 this 所以它将引用组件。
我是 vue.js 的新手，我正在尝试做这样的事情：https://appendto.com/2017/05/building-tutorial-search-app-vue/ 但是使用 nuxt.js 并从 wordpress rest api.
获取数据到目前为止，我设法制作了一个基于 wordpress 菜单的动态菜单，以及用于页面和自定义 post 类型的动态 url。
我有一个页面列出了自定义 post 类型（专家），并且在该页面中
我希望能够通过文本搜索和按类别过滤那些 post 类型。
问题 1
文本搜索在下面的代码中运行良好。如果我键入一个字母或一个单词，下面的列表会相应减少（我设法通过 API 列出了 posts 类型）。但是，如果我清空文本输入，列表将保持过滤状态，我不知道为什么...我通过将 axios 调用的 return 存储到另一个变量 (orig) 中的 post 类型来解决这个问题我在 filterExpertes 方法中使用它，但我不确定这是一个好习惯......
问题 2
我设法基于 wordpress rest api 动态构建复选框列表并使用 vue 开发工具，我可以看到我选择的变量在我进行选择时得到更新。尽管如此，只要选中一个框，列表就会变空。
在 wordpress 方面，我安排其余响应包括这样的 post 类型类别（代码 returned 如果我转到我的自定义 post 类型端点 http://lesexpertes.test/wp-json/wp/v2/experte（axios 请求的结果）
[
{
"id": 120,
"date": "2018-03-29T10:02:01",
"date_gmt": "2018-03-29T08:02:01",
"guid": {
"rendered": "http://lesexpertes.test/experte/aperiam-itaque-enim-omnis/"
},
"modified": "2018-03-29T18:03:23",
"modified_gmt": "2018-03-29T16:03:23",
"slug": "julia",
"status": "publish",
"type": "experte",
"link": "http://lesexpertes.test/experte/julia/",
"title": {
"rendered": "Julia"
},
"content": {
"rendered": "<h2>Nemo aut fuga ad voluptatem placeat aliquam quia. Voluptatibus nihil dolorem assumenda repellat ipsum excepturi possimus. Dolorem optio blanditiis eius rem distinctio id eveniet</h2>\n<p>Veritatis odit <a title=\"Excepturi consequatur pariatur quisquam voluptas.\" href=\"http://www.quigley.info/natus-et-cupiditate-repudiandae-illum-et\">et quos quaerat. Deserunt qui in</a> pariatur libero atque. Aperiam sint consectetur deserunt necessitatibus. Laboriosam sunt facilis qui beatae. Qui dignissimos quia dolores. Dolores molestiae ullam id. Temporibus ut autem fugiat <a title=\"Possimus.\" href=\"http://williamson.info/\">modi aut sed soluta.</a> eligendi modi corrupti necessitatibus unde libero alias Repudiandae delectus fugiat ea quos dolorum quasi dolorem Porro delectus dolore iure explicabo. Rerum blanditiis <a title=\"Quaerat eos dicta facilis.\" href=\"http://www.heaney.com/soluta-exercitationem-qui-quaerat-et-quo-nostrum.html\">quam consequatur maxime</a> Et rerum aliquam natus sequi sed. Deserunt consequuntur quo quos earum est. Neque officiis explicabo nihil eum. Eaque porro perspiciatis voluptas animi eveniet. sint quibusdam ut Voluptatem dolores quidem consequatur unde. Omnis <a title=\"Distinctio non numquam.\" href=\"http://www.cruickshank.com/vitae-quia-laborum-harum-ipsam-tempore-enim\">dolore quas ipsum ut quasi. Autem</a> <a title=\"Odio quas similique.\" href=\"http://www.johnson.org/ut-aspernatur-eum-recusandae-voluptatem-tempora-rerum\">incidunt vero fuga</a> magnam magnam. Laudantium ratione impedit consequatur. Nemo veniam ipsam reiciendis in. Rerum labore magni dicta saepe doloremque laudantium. Voluptatem eos qui sit aut voluptas eveniet. Numquam et accusamus nisi dolorem. Vel porro vitae sint hic. Ut nam quam aut <a title=\"Consequatur ullam magni aliquam quo error voluptas.\" href=\"http://www.boyle.biz/qui-aut-aperiam-inventore-omnis-accusantium.html\">autem esse eum.</a></p>\n",
"protected": false
},
"author": 1,
"featured_media": 121,
"template": "",
"categories": [
11,
10
],
"langue": [
],
"better_featured_image": {
"id": 121,
"alt_text": "",
"caption": "",
"description": "",
"media_type": "image",
"media_details": {
"width": 300,
"height": 300,
"file": "2018/03/e9c4f864-3555-3e8c-b0f7-73f9d4d74348.jpg",
"sizes": {
"thumbnail": {
"file": "e9c4f864-3555-3e8c-b0f7-73f9d4d74348-150x150.jpg",
"width": 150,
"height": 150,
"mime-type": "image/jpeg",
"source_url": "http://lesexpertes.test/wp-content/uploads/2018/03/e9c4f864-3555-3e8c-b0f7-73f9d4d74348-150x150.jpg"
}
},
"image_meta": {
"aperture": "0",
"credit": "",
"camera": "",
"caption": "",
"created_timestamp": "0",
"copyright": "",
"focal_length": "0",
"iso": "0",
"shutter_speed": "0",
"title": "",
"orientation": "0",
"keywords": [
]
}
},
"post": 120,
"source_url": "http://lesexpertes.test/wp-content/uploads/2018/03/e9c4f864-3555-3e8c-b0f7-73f9d4d74348.jpg"
},
"acf": {
"nom": "Watson",
"prenom": "Julia",
"telephone": "022 733 40 31",
"courriel": "julia@banquise.ch",
"formation": "<p>Université de Genève – Master en Ecologie</p>\n"
},
"cats": [
{
"term_id": 11,
"name": "Ecologie",
"slug": "ecologie",
"term_group": 0,
"term_taxonomy_id": 11,
"taxonomy": "category",
"description": "",
"parent": 0,
"count": 23,
"filter": "raw",
"cat_ID": 11,
"category_count": 23,
"category_description": "",
"cat_name": "Ecologie",
"category_nicename": "ecologie",
"category_parent": 0
},
{
"term_id": 10,
"name": "Technologies",
"slug": "technologies",
"term_group": 0,
"term_taxonomy_id": 10,
"taxonomy": "category",
"description": "",
"parent": 0,
"count": 26,
"filter": "raw",
"cat_ID": 10,
"category_count": 26,
"category_description": "",
"cat_name": "Technologies",
"category_nicename": "technologies",
"category_parent": 0
}
],
"_links": {
"self": [
{
"href": "http://lesexpertes.test/wp-json/wp/v2/experte/120"
}
],
"collection": [
{
"href": "http://lesexpertes.test/wp-json/wp/v2/experte"
}
],
"about": [
{
"href": "http://lesexpertes.test/wp-json/wp/v2/types/experte"
}
],
"author": [
{
"embeddable": true,
"href": "http://lesexpertes.test/wp-json/wp/v2/users/1"
}
],
"wp:featuredmedia": [
{
"embeddable": true,
"href": "http://lesexpertes.test/wp-json/wp/v2/media/121"
}
],
"wp:attachment": [
{
"href": "http://lesexpertes.test/wp-json/wp/v2/media?parent=120"
}
],
"wp:term": [
{
"taxonomy": "category",
"embeddable": true,
"href": "http://lesexpertes.test/wp-json/wp/v2/categories?post=120"
},
{
"taxonomy": "langue",
"embeddable": true,
"href": "http://lesexpertes.test/wp-json/wp/v2/langue?post=120"
}
],
"curies": [
{
"name": "wp",
"href": "https://api.w.org/{rel}",
"templated": true
}
]
}
},
{
"id": 84,
"date": "2018-03-29T09:33:04",
"date_gmt": "2018-03-29T07:33:04",
"guid": {
"rendered": "http://lesexpertes.test/experte/qui-et-similique-deleniti-sint-exercitationem/"
},
"modified": "2018-03-29T09:33:04",
"modified_gmt": "2018-03-29T07:33:04",
"slug": "qui-et-similique-deleniti-sint-exercitationem",
"status": "publish",
"type": "experte",
"link": "http://lesexpertes.test/experte/qui-et-similique-deleniti-sint-exercitationem/",
"title": {
"rendered": "Qui et similique deleniti sint exercitationem"
},
...
这是我的代码：
index.vue
<template>
<div>
<main role="main">
<section class="jumbotron text-center">
<SearchBox v-model="searchTerm" />
<RadioGroup v-model="selected" />
<ExpertesList :expertes="expertes" />
</section>
</main>
</div>
</template>
<script>
import axios from 'axios'
import ExpertesList from '@/components/ExpertesList'
import SearchBox from '@/components/SearchBox'
// import Pagination from '@components/Pagination'
import RadioGroup from '@/components/RadioGroup'
export default {
components: {
ExpertesList,
SearchBox,
RadioGroup
},
asyncData(context) {
return axios.get('http://lesexpertes.test/wp-json/wp/v2/experte')
.then(res => {
return {
expertes: res.data,
orig: res.data
}
})
.catch(e => context.error(e))
},
data() {
return {
searchTerm: '',
selected: ''
// expertes: ''
}
},
computed: {
result() {
return this.orig
}
},
watch: {
searchTerm: function () {
this.filterExpertes()
},
selected: function () {
this.filterExpertes()
}
},
methods: {
filterExpertes: function () {
const searchTerm = this.searchTerm.toLowerCase()
const selected = this.selected
let result = this.result
if (searchTerm) {
result = result.filter(experte => {
return (
experte.title.rendered.toLowerCase().search(searchTerm) >= 0
// ||
//experte.description.toLowerCase().search(searchTerm) >= 0
)
})
}
if (selected) {
// result = result.filter(experte => {
// return (
// experte.categories.indexOf(selected) >= 0
// )
// })
result = result.filter(experte => experte.categories.indexOf(selected) >= 0)
}
this.expertes = result
//this.page = 1
}
},
created: function () {
this.filterExpertes()
}
}
</script>
RadioGroup.vue
<template>
<div>
<!-- <b-form-group label="Catégories:">
<b-form-checkbox-group id="checkboxes2" name="flavour2" v-model="selected">
<b-form-checkbox v-for="cat in cats" :value="cat.id">{{cat.name}}</b-form-checkbox>
</b-form-checkbox-group>
</b-form-group> -->
<div v-for="cat in cats">
<input type="checkbox" :value="cat.id" v-model="selected">
<label >{{cat.name}}</label>
</div>
<hr>
<div>Selected:
<strong>{{ selected }}</strong>
</div>
</div>
</template>
<script>
import axios from 'axios';
export default {
name: 'RadioGroup',
mounted: function () {
//console.log( wp.api.collections );
this.getCats();
},
data() {
return {
cats: '',
selected: []
//
}
},
methods: {
getCats: function () {
const vm = this;
axios.get('http://lesexpertes.test/wp-json/wp/v2/categories')
.then((res2) => {
vm.cats = res2.data;
})
.catch((res2) => {
//console.log( `Something went wrong : ${ res }` );
});
}
},
watch: {
selected: function (val) {
this.$emit('input', val)
}
}
}
</script>
ExpertesList.vue
<template>
<div>
<ul>
<li v-for="experte in expertes">
{{experte.title.rendered}} - {{experte.categories}}
</li>
</ul>
</div>
</template>
<script>
//import Experte from '@/components/Experte'
export default {
name: 'ExpertesList',
//components: { Experte },
props: ['expertes']
}
</script>
SearchBox.vue
<template>
<div class="form-group has-feedback">
<input type="search" class="form-control input-lg" v-model="searchTerm"
placeholder="Search the title/description" :name="name">
<span class="glyphicon glyphicon-search form-control-feedback" aria-hidden="true"></span>
</div>
</template>
<script>
export default {
props: {
value: {
default: ''
},
name: {
default: ''
}
},
data: function() {
return { searchTerm: this.value }
},
watch: {
value: function(val) {
this.searchTerm = val
},
searchTerm: function(val) {
this.$emit('input', val)
}
}
}
</script>
欢迎任何帮助/提示...
我没有在您的 fiddle 中看到问题 #1，但这是第二个问题的解决方案：
new Vue({
el: '#app',
data: {
searchQuery: '',
items: [],
cats: [{
id: 2672,
name: "Autre",
slug: "autre",
taxonomy: "category",
checked: false,
},
{
id: 25,
name: "Culture",
slug: "culture",
taxonomy: "category",
checked: false,
},
],
},
computed: {
checkedIds() {
return Object.assign({}, ...this.cats
.filter(el => el.checked)
.map(el => ({
[el.id]: true
})));
},
filteredItems() {
return this.items.filter((item) => {
return (
item.title.rendered.indexOf(this.searchQuery) !== -1 &&
item.categories.filter(el => this.checkedIds[el]).length > 0
);
});
},
},
created: function() {
const that = this
axios.get('https://lecourrier.ch/wp-json/wp/v2/posts')
.then(function(response) {
that.items = response.data
});
},
});
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<div id="app">
<input type="search" placeholder="Search" v-model="searchQuery">
<div v-for="cat in cats">
<input type="checkbox" :value="cat.id" v-model="cat.checked">
<label>{{cat.name}} - cat_id: {{cat.id}}</label>
</div>
<ul>
<li v-for="item in filteredItems" :key="item.id">{{ item.title.rendered }} - cat_id: {{item.categories}}</li>
</ul>
</div>
除了按查询字符串过滤外，您还需要跟踪所选类别。您可以通过在输入上使用 v-model 指令来实现。然后您可以创建一个选定 ID 的地图（查看 checkedIds）并使用它过滤您的项目。
P.S。使用箭头函数来避免写 var that = this。箭头函数没有它自己的 this 所以它将引用组件。