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

我正在使用

v-if

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

例如，这里有一个咖啡馆列表，我希望它只显示提供茶的咖啡馆。这能做到吗

HTML

---

试试这个。您可以使用includes检查饮品阵列中的茶是否存在

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

{{cafe.name}
{{cafe.location}

{{饮料}

只需添加一些条件：咖啡馆。饮料。包括（“茶”）

{{cafe.name}
{{cafe.location}

{{饮料}

---

，请注意，不建议同时使用v-if和v-for。有关详细信息，请参阅样式指南

谢谢。你真是个天才！vue.js不建议将

v-if

与

v-for

一起使用。他们说在这样的用例中使用计算属性

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

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

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