堆棧內存溢出
  簡體   English   中英

使用Nuxt的Wordpress Rest API上的累積過濾器

[英]Cumulative filters on wordpress rest api with nuxt

 原文  2018-04-08 10:23:36  8   1    wordpress/ rest/ filter/ vue.js/ nuxt.js

問題描述

我對vue.js很陌生，我正在嘗試做這樣的事情： https ://appendto.com/2017/05/building-tutorial-search-app-vue/但使用nuxt.js並獲取來自WordPress其余API的數據。

到目前為止，我設法基於wordpress菜單創建了一個動態菜單，並為頁面和自定義帖子類型創建了動態url。

我有一個頁面，列出了自定義帖子類型（專家），並且在該頁面中

我希望能夠通過文本搜索和按類別過濾那些帖子類型。

問題1

文本搜索在下面的代碼中工作正常。 如果我輸入字母或單詞，則相應的列表會相應減少（我設法通過API列出了帖子類型）。 但是，如果我清空文本輸入，列表將保持過濾狀態，我不知道為什么...我通過將axios調用的返回值存儲在另一個在filterExpertes方法中使用的變量（orig）中來解決此問題，但是我不確定這是一個好習慣...

問題2

我設法基於wordpress rest api和使用vue dev工具動態構建了復選框列表，我可以看到選擇時變量已更新。 但是，選中復選框后，該列表將為空。

在wordpress方面，我安排其余響應包括這樣的帖子類型類別（如果我轉到自定義帖子類型端點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 &#8211; 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"
    },

...

這是我的代碼：

索引值 

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

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

任何幫助/提示歡迎...

1 個解決方案

解決方案1
 0 已采納  2018-04-08 15:54:25

我看不到小提琴中的問題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 ）並使用它過濾您的項目。

jsFiddle

PS使用箭頭功能來避免編寫var that = this 。 箭頭的功能沒有它自己的this因此它會引用該組件。

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 如何應用多個過濾器wordpress rest api WordPress自定義REST API 使用Wordpress API REST發布 Wordpress REST API端點 選擇WordPress REST API WordPress REST API版本2 Wordpress REST API 問題 Wordpress REST API身份驗證 WordPress REST API + Swift Wordpress Rest API登錄
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM