Vue.js Условие: если содержит

Question

Мне нужно создать условие в Vue для проверки, если массив содержит значения.

items: { [1,5,8,12,63]}
                <div v-for="item in items">
                        <div v-if="item == 1">
                               Yes
                        </div>
                        <div v-else>
                            No
                        </div>
                </div>

И вывод: Да, Нет, Нет, Нет, Нет.

Мне нужнополучить только Да и Ни один раз.Мне нужно:

Да, нет.

Answer 1

v-for будет просто проходить через массив, а v-if / v-else будет условно отображать соответствующий блок кода для каждого элемента в массиве .Вместо этого вы должны использовать метод, чтобы проверить, есть ли число в вашем списке items.Вы можете сделать это, используя indexOf ..

var app = new Vue({
  el: '#app',
  data: {
    items: [1, 5, 8, 12, 63]
  },
  methods: {
    itemsContains(n) {
      return this.items.indexOf(n) > -1
    }
  }
});

<div id="app">
  <div v-if="itemsContains(1)">
    Yes
  </div>
  <div v-else>
    No
  </div>
</div>

См. Этот JSFiddle

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

<div id="app">
  <div v-if="items.indexOf(1) > -1">
    Yes
  </div>
  <div v-else>
    No
  </div>
</div>

Answer 2

var app = new Vue({
  el: '#app',
  data: {
    items: [1, 5, 8, 12, 63]
  }
});

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

                

<div id="app">

  <div v-if="items.indexOf(1) > -1">
    Yes
  </div>
  <div v-else>
    No
  </div>
 
</div>