如何使用带有axios和vue js的url参数动态查询for循环

Question

我最近开始尝试使用 WordPress Rest API 和 VueJs。我正在尝试完成以下任务：

• 我使用 Axios 获取 API URL（我的 WP REST API 网站）来构建帖子列表。使用下面的代码可以完美地工作。
• 接下来（这是我无法使其工作的原因），我需要能够使用 url 参数查询“过滤”for 循环。参数是“国家”。因此，当单击“法国”按钮时，例如参数：?country=france 应添加到基本 URL。
• 基本上，我尝试在这些按钮（法国和葡萄牙）中添加简单的按钮点击功能。请检查我的代码，看看我到目前为止尝试了什么。

HTML 代码

<div class="row">

    <button v-on:click="getFrance" id="france" class="m-2">France</button>
    <button v-on:click="getPortugal" id="portugal" class="m-2">Portugal</button>

    <form class="form-inline" v-on:submit.prevent="searchCountry">
        <input type="text" id="nameInput" class="form-control mb-2 mr-sm-2 mb-sm-0" placeholder="Frankrijk" v-model="country">
        <input type="submit" class="btn btn-primary"></input>
    </form>
    {{country}}
</div>

<div class="row">
    <template>
        <div class="col-6" v-for="post of posts" :key="post.id">

            <div class="card">

                <img v-bind:src="post.acf.header_picture.url" class="card-img-top" alt="Card image cap">

                <div class="card-body v-html">
                    <h5>{{ post.title.rendered }}</h5>
                </div>
                <div class="card-footer">
                    <a><button class="btn-sm btn-warning">Read more</button></a>
                </div>
            </div>
        </div>
    </template>
</div>
</div>
</div>

JS 代码

var app = new Vue({
  el: '#app',
  data () {
    return {
      country : '',
      posts : [] }
  },
  mounted () {
    axios
      .get('<<WP REST API URL>>', {
        params: {
          country: this.country
        }
      })
      .then(response => {
        this.posts = response.data
    })
  },
  methods : {
    getFrance: function(){
      this.country = 'france'
    },
    getPortugal: function(){
      this.country = 'portugal'
    }
  }
})

编辑：我按要求添加了 URL 的响应数据。但是，这是一个相当大的数据块，所以如果这不是您要查找的内容，请告诉我。

acf: Object
about_accommodation: "<ul>↵<li><strong>Tent</strong>: de tenten zijn voor 4 personen en bestaan uit 2 delen die beide geschikt zijn voor 2 personen. Naast het slaapdeel is er een plek waar de bagage kan liggen, wel zo fijn dus. Er is hier geen slaapmateriaal aanwezig, dus je dient zelf een matje, slaapzak en kussen mee te nemen. Het is mogelijk om zo&#8217;n &#8216;compartiment&#8217; privé te boeken.</li>↵<li><strong>Sheddie</strong>: deze gezellige houten huisjes zijn een stuk comfortabeler dan de tenten en zijn geschikt voor 2 personen. Er is een groot bed aanwezig, waar 2 personen in kunnen slapen. Je kunt ter plekke beddengoed huren of zelf een slaapzak en kussen meenemen. Ook is er voldoende ruimte voor je bagage en zelfs een surfplank. Je kunt er net staan, wel zo makkelijk om je even op jezelf om te kleden voor de surfsessie. Ook deze kun je privé boeken.</li>↵<li><strong>Sheddie Deluxe</strong>: deze tenten zijn nog groter dan de sheddies en dus nog een stuk comfortabeler. Je kunt kiezen tussen 2 losse bedden of een groot 2-persoonsbed, ideaal voor koppels. Ook hier zijn matrassen aanwezig en heb je de optie om een beddengoedpakket bij te boeken. Indien je deze optie privé wilt, is dat mogelijk.</li>↵<li><strong>Tipi-Deluxe: </strong>De Tipi Deluxe is een prachtig ruimte tipi-tent met twee losse of 1 groot bed met een mooie aankleding. Dit is verblijven in stijl!</li>↵</ul>↵"
about_activities: "<ul>↵<li><strong>Party:</strong> 18+, dat betekent party! Vanaf het surfkamp kun je lopend naar tal van leuke barretjes die tot in de vroege uurtjes open zijn</li>↵<li><strong>Trips: </strong>tijdens jouw verblijf kun je deelnemen aan de daguitstap naar San Sebastian, een fantastische stad die zeker een bezoekje waard zijn. Ontdek de echte gastronomie die Spanje te bieden heeft</li>↵<li><strong>Yoga:</strong> kies voor de yogalessen voor de ideale ontspanning en een leuke afwisseling met het surfen. Dit is de beste manier om je spieren even helemaal bij te laten komen na een flinke inspanning in het water</li>↵<li><strong>Skate &amp; Beach:</strong> ook naast het surfen is er van alles te doen. Cruise over de boulevard van Moliets en geniet van het vrije leven</li>↵</ul>↵"
about_facilities: Array(8)
about_guests: "<p>In het surfkamp vind je vooral Nederlandstaligen, de meesten tussen de 18 en de 25 jaar oud. De sheddies zijn perfect om als koppel of vrienden te verblijven maar ook solo reizigers weten een weg te vinden naar Surfblend Moliets</p>↵"
about_meals: "<ul>↵<li><strong>Eten:</strong> het halfpension is zeker aan te raden. Je zult 8 x ontbijten (incl. nadat je aankomt in het surfkamp na de busreis) en 5 x wordt er een divers en lekker diner geserveerd. Het hoogtepunt voor velen is de wekelijkse barbecue, gegarandeerd het begin van een mooie avond. In Zarautz zelf zijn er een aantal leuke opties voor lunch, maar voor ontbijt en diner is de maaltijd-optie aan te raden – wel zo makkelijk en het is ook nog eens heel erg lekker</li>↵<li><strong>Dieetwensen:</strong> het is geen probleem indien je een bepaalde dieetwens hebt. Geef dit van te voren even aan bij de kampleiding</li>↵<li><strong>Kookfaciliteiten:</strong> in het surfkamp zijn verder geen kookfaciliteiten aanwezig die door de gasten kunnen worden gebruikt</li>↵</ul>↵"
about_surf_conditions: "<ul>↵<li><strong>Beginners:</strong> beginnende surfers raden wij de cursus van 15 uur ten zeerste aan. Zeker in het begin is surfen een vrij lastig te leren sport, waarbij goede training vereist is.</li>↵<li><strong>Intermediate:</strong> intermediate surfers raden wij de cursus van 10 uur ten zeerste aan.</li>↵<li><strong>Gevorderd: </strong>gevorderde surfers kunnen ervoor kiezen om alleen gebruik te maken van het surfmateriaal.</li>↵</ul>↵"
about_surf_holiday: "<ul>↵<li><strong>Het kamp: </strong>dit surfkamp biedt werkelijk alles: surfen, veel fun, leuke activiteiten en uiteraard een flinke dosis party! Alle gasten zijn ten minste 18 jaar oud en hierdoor ontstaat er een leuke sfeer waar iedereen uit is op hetzelfde: een fantastische tijd hebben. Het prachtige surfstrand van Molietes bevindt zich op loopafstand van het surfkamp, ideaal dus. En ook de vele barretjes in het centrum kun je gemakkelijk bereiken. Ben jij klaar voor dé surfvakantie van 2020?</li>↵<li><strong>Moliets: </strong>dit Franse dorpje ademt surf, meer dan waar dan ook. In de zomer komen hier surfers van alle hoeken uit de wereld naartoe om de beroemde golven van Moliets te proberen. Ook is er een gezellige boulevard met enkele horecagelegenheden.</li>↵<li><strong>Vervoer: </strong>wat erg fijn is, is dat Moliets vanuit Nederland en België met de bus bereikbaar is. Zie onderaan deze pagina ‘vervoer’ voor meer informatie.</li>↵</ul>↵"
about_surf_lessons: "<ul>↵<li><strong>Surfen:</strong> je kunt kiezen uit de volgende surfpakketten:↵<ul>↵<li>Pakket S: 3 dagen surfles per week + gebruik surfmateriaal</li>↵<li>Pakket M: 5 dagen surfles per week + gebruik surfmateriaal</li>↵<li>Alleen gebruik surfmateriaal</li>↵<li>Er worden ook theorielessen gegeven</li>↵<li>Voor beginnende surfers raden wij Pakket L ten zeerste aan. Zeker in het begin is surfen een vrij lastig te leren sport, waarbij goede training vereist is</li>↵</ul>↵</li>↵<li><strong>Surfmateriaal:</strong> bij alle pakketten is het gebruik van het surfmateriaal (surfboard &amp; wetstuit) inbegrepen in de prijs van het verblijf. Het is echter wel zo dat de gasten die surflessen volgen, voorrang krijgen op het surfmateriaal. Meestal levert dit geen problemen op en zeker ook buiten de lessen om kan er gewoon gesurft worden.</li>↵</ul>↵<p>&nbsp;</p>↵"
about_transport: "<ul>↵<li><strong>Surfbus: </strong>de bussen naar Moliets vertrekken op vrijdagmiddag vanaf Amsterdam, Utrecht, Den Bosch, Breda, Antwerpen en Gent. De vertrektijd zal liggen tussen 13:00 en 18:30 uur. Op de zaterdag van jouw vertrek zal de bus aan het einde van de middag terugrijden richting België en Nederland, waar je dan zondagochtend aankomt. Rijdt vanaf 21 juni t/m 15 september 2019 (vertrek vrijdagmiddag, terugkomst zondagochtend).</li>↵<li><strong>Eigen vervoer:</strong> het is geen probleem om met de auto naar camping Moliets te komen. Er zijn mogelijkheden om gratis te parkeren.</li>↵</ul>↵"
accommodation: "Gedeelde en privé tenten"
accommodation_type: "Surfkamp"
activities_gallery: Array(3)
add_ons: Object
alert_checkbox: Array(1)
alert_text: "<p>Er zijn nog enkele plekken beschikbaar voor deze zomer, wacht niet met boeken!</p>↵"
arrival: "Aankomst en vertrek op zaterdag"
availability: "Raakt spoedig volgeboekt"
average_age: "18 - 25"
carousel: Array(3)
check-in-check-out: (...)
country: "Frankrijk"
covid: true

etc.etc.

Answer 1

据我了解，如果您要过滤帖子，则必须在 API 端完成，这样您就可以获得所有“法国”帖子，不要获得不必要的信息，也不要浪费内存。

如果你不能在 API 端过滤它（但为什么要发送 URL 参数）并获取所有帖子，你可以创建一个方法来使用它来过滤帖子：

filterPostsByCountry: function() {
      return this.posts.filter(post => post.country === this.country);
}