javascript - 在使用 Vue 列表渲染时，如何使用 v-if 来检查项目是否在数组中？

Question

我v-if用来有条件地呈现咖啡馆列表。但是，我只希望它根据饮料项目是否列在数组中来列出项目。

例如，这是一个咖啡馆列表，我希望它只显示提供茶的咖啡馆。这可以做到吗？

HTML;

<div id="app">
  <ul>
      <li v-for="cafe in cafes" v-if="drinks == 'drinks('tea')'">
         <h2>{{cafe.name}}</h2>
        <p>{{cafe.location}}</p>
        <span v-for="drinks in cafe.drinks">
            {{drinks}}
        </span>
      </li>
  </ul>
</div>

然后我的脚本如下；

new Vue({
  el: '#app',
    data() {
        return {
            cafes: [
              { 
                name: 'The Black Cup Cafe',
                location: 'Australia',
                drinks: ['tea', 'coffee', 'Lemonade']
              },
              { 
                name: 'Rest Cafe bar',
                location: 'Brazil',
                drinks: ['tea', 'coffee', 'Coke']
              }              
            ]
        }
    }
})

标签： javascriptvue.jsvuejs2

Answer 1

尝试这个。您可以使用包含来检查饮料阵列中的茶是否存在。

<div id="app">
  <ul>
      <li v-for="cafe in cafes" v-if="cafe.drinks.includes('tea')">
         <h2>{{cafe.name}}</h2>
        <p>{{cafe.location}}</p>
        <span v-for="drinks in cafe.drinks">
            {{drinks}}
        </span>
      </li>
  </ul>
</div>