VueJS 2個輸入濾波器組

我有一個輸入：VueJS 2個輸入濾波器組

<input type="text" placeholder="filter by country name" />

，並列出清單：

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

這是名單大陸和每一個是一個lis其中的國家。如何實現搜索輸入以僅顯示我正在尋找的國家/地區？我試圖顯示過濾國家的列表，但隨後應用程序顯示它們在每個大陸，而不是在適當的一個。

來源

2017-08-27 Adam Marczyk

你能分享一下你的json數據嗎？ –

這是確切的答案=> https://restcountries.eu/rest/v2/all 我已經使用lodash（按分區域）對它進行了分組並且您可以在代碼中放置'subregion'而不是'continent' –

https://codepen.io/blakewatson/pen/xEXApK - 這會給你一個想法 –

首先，您需要從輸入字段中獲取字符串並將其用作搜索查詢。這是通過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倒是了 - 相反，他們也在過濾。此外，只要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>

來源

2017-08-27 18:37:02

是否與使用：數據{ 查詢：''， } ？因爲它不會做任何事情。什麼是適當的HTML？ –

據我所知，['data'必須是一個函數]（https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function）。 –

你的意思是「什麼都不做」？如果在'input'字段旁邊輸入'{{query}}'，則在鍵入時應該會看到數據更改。這在Vue的[非常簡介]（https://vuejs.org/v2/guide/index.html#Handling-User-Input）中有介紹。 –

這裏有一種方法可以做到這一點。

基本上，將過濾器綁定到數據中的值，並根據計算值返回分組列表。

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/[email protected]"></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>

通常與Vue公司，執行上，你需要有反應的數據操作時，你會與計算性能做到這一點。

來源

2017-08-27 18:33:00 Bert

VueJS 2個輸入濾波器組

回答

相關問題