При использовании рендеринга списка 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']
              }              
            ]
        }
    }
})

Answer 1

Попробуйте это. Вы можете использовать include, чтобы проверить, находится ли чай в массиве напитков или нет.

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

Answer 2

просто добавьте условие ： cafe.drinks.includes ('tea')

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

документ , обратите внимание, что не рекомендуется использовать v-if и v-for вместе . Подробную информацию см. В руководстве по стилю