Question

我有一个输入：

＆＃13;

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

＆＃13;

列表清单：

＆＃13;

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

＆＃13;

这是各大洲的列表，每个大陆都是其中的国家/地区列表。如何实施搜索输入以仅显示我正在寻找的国家/地区？我试图显示已过滤国家/地区的列表，然后应用程序会在每个大洲显示它们而不是恰当的一个。

Answer 1

这是你可以这样做的一种方式。

基本上，将过滤器绑定到数据中的值，然后根据计算值返回分组列表。

＆＃13;

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

＆＃13;

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

＆＃13;

通常使用Vue，当您对需要被动的数据进行操作时，您将使用计算属性进行操作。

Answer 2

首先，您需要从输入字段中获取字符串并将其用作搜索查询。这是由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>

VueJS 2输入过滤器组

2 个答案: