如何根据城市数组过滤数据

【问题标题】：how can i filter the data based on array of cities如何根据城市数组过滤数据
【发布时间】：2020-06-01 10:05:27
【问题描述】：

我有一个选择菜单，我可以在其中选择城市我想显示这个城市的所有可用书籍（基于城市数组）我应该在checkavailablecity里面写什么

这里是完整代码

HTML：

<select>
<option value="NewYork" v-model="myCity">New York</option>
.. </select>
<ul>
<li v-for="book in checkavailablecity">{{book.bookName}} 
</li>
</ul></div>

JavaScript：

data: {
  myCity:'',
  bookinfo:[{
  bookName:'Big Nate: Fun Blaster',
  cities: ['NewYork','Washington','Texas']
  },
  {
  bookName:'Now I Rise',
  cities: ['Texas']
  }
  ]
},
computed: {
  checkavailablecity: function(){
       var mycity = this.myCity;
       return this.bookinfo.filter(function(book){
       ....
     })   }   } })

【问题讨论】：

请阅读How do I ask a good question并修改您的问题。

标签： javascript algorithm vue.js debugging filtering

【解决方案1】：

首先，您将一个变量绑定到选择下拉菜单，而不是每个选项。

因此，您共享的链接中的select 下拉菜单将从：

<select>
 <option value="NewYork" v-model="myCity">New York</option>
 <option value="Texas" v-model="myCity">Texas</option>
</select>

到

<select v-model="myCity">
 <option value="NewYork" >New York</option>
 <option value="Texas">Texas</option>
</select>

您的回调函数将简单地检查您当前图书的cities 是否选择了当前城市。如下所示：

return this.bookinfo.filter(function(book){
     return book.cities.includes(mycity);
})

工作演示： https://jsfiddle.net/k8L4my3u/

【讨论】：