Как я могу отфильтровать данные на основе массива городов

Question

У меня есть меню выбора, где я могу выбрать город. Я хочу отобразить все книги, доступные в этом городе (на основе массива городов), что я должен написать внутри 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){
       ....
     })   }   } })

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