VueJS 2つの入力フィルタグループは

Question

私が入力を持っています大陸と各1つは嘘ですその中の各国の 検索入力を実装して、探している国のみを表示するにはどうすればよいですか？ フィルタリングされた国のリストを表示しようとしましたが、適切なものではなく各大陸に表示されます。

Answer 1

まず、入力フィールドから文字列を取得し、それを検索クエリとして使用する必要があります。これは、v-modelディレクティブによって行われ、ビューとデータを同期させた状態に保ちます。

だから、あなたのテンプレートで：

<input type="search" v-model="query"> 

とモデル：我々は、データをロードすると

data() { 
    return { 
    query: '', 
    countryList: [], // empty while data arrives 
    } 
} 

は、我々は、元のリストを保つつもりです。まだ何もしていません。私たちは後でそれをグループ化し、フィルタリングも行います。

xhr.onload = function() { 
    self.countryList = JSON.parse(xhr.responseText); 
}; 

さて、あなたが表示したいの大陸はただ_.groupByはもうD」ではありません - 代わりに、彼らはまた、フィルタリングされます。さらに、このフィルタリングは、queryが変更されるたびに発生する必要があります。 a computed propertyの完璧な候補です。

computed: { 
    continents() { 
    const filtered = this.countryList.filter(({name}) => { 
     return name.toLowerCase().includes(this.query.toLowerCase()) 
    }); 
    return _.groupBy(filtered, "subregion"); 
    }, 
}, 

これで、計算されたプロパティcontinentsをループするだけで済みます。

<li v-for="subregion in continents"> 
    {{ subregion[0].subregion }} 
    <ul> 
     <li v-for="country of subregion"> 
      {{ country.name }} ({{ country.callingCodes[0]}})</label> 
     </li> 
    </ul> 
    </li> 
</ul> 

Answer 2

これを行う方法があります。

基本的に、フィルタをデータの値にバインドし、計算された値に基づいてグループ化されたリストを返します。 Vueの持つ一般的

console.clear() 
 

 
new Vue({ 
 
    el: "#app", 
 
    data: { 
 
    countries: null, 
 
    countryFilter: null 
 
    }, 
 
    computed: { 
 
    continents() { 
 
     let filteredCountries = this.countries 
 
     let filter = c => c.name.toLowerCase().includes(this.countryFilter.toLowerCase()) 
 

 
     if (this.countryFilter) 
 
     filteredCountries = this.countries.filter(filter) 
 

 
     return _.groupBy(filteredCountries, "subregion") 
 
    } 
 
    }, 
 
    mounted() { 
 
    axios.get("https://restcountries.eu/rest/v2/all") 
 
     .then(response => this.countries = response.data) 
 
    } 
 
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.16.2/axios.min.js"></script> 
 
<script src="https://unpkg.com/vue@2.4.2"></script> 
 
<div id="app"> 
 
    <input v-model="countryFilter" type="text" placeholder="filter by country name" /> 
 
    <ul> 
 
    <li v-for="continent, name in continents"> 
 
     {{name}} 
 
     <ul> 
 
     <li v-for="country in continent">{{country.name}}</li> 
 
     </ul> 
 
    </li> 
 
    </ul> 
 
</div>

あなたが反応することが必要なデータの操作を実行するとき、あなたは計算されたプロパティでそれを行います。