Почему не работает v-if во vue?

Question

[Erl]

Почему при срабатывании условия, он всё равно рисует 2-й template v-else? ведь отработало первое условие
получается, если я убираю блок v-else, то он срабатывает как надо, при соответствии показываются только нужные строки, но при добавлении v-else, рисует весь массив

caliber: "12x70"

<template v-for="data in ammo_data">
          <template v-if="data.caliber == caliber">
            <tr v-for="items in data.items" :key="items.id">
              <td data-label="Наименование"><span>{{items.name}}</span></td>
              <td data-label="Калибр"><span>{{items.caliber}}</span></td>
              <td data-label="Урон"><span class="val">{{items.damage}}</span></td>
              <td data-label="Бронепробитие"><span class="val">{{items.arm_pentra}}</span></td>
              <td data-label="Повреждение брони"><span class="val">{{items.arm_damage}}</span></td>
              <td data-label="Вероятность фрагментации"><span class="val">{{items.bullet_frag}}</span></td>
              <td data-label="Скорость (м/сек)"><span class="val">{{items.speed}}</span></td>
              <td data-label="Вероятность рикошет"><span class="val">{{items.ricochet}}</span></td>
            </tr>
          </template>
          <template v-else>
            <tr v-for="items in data.items" :key="items.id" :data-label="data.count">
              <td data-label="Наименование"><span>{{items.name}}</span></td>
              <td data-label="Калибр"><span>{{items.caliber}}</span></td>
              <td data-label="Урон"><span class="val">{{items.damage}}</span></td>
              <td data-label="Бронепробитие"><span class="val">{{items.arm_pentra}}</span></td>
              <td data-label="Повреждение брони"><span class="val">{{items.arm_damage}}</span></td>
              <td data-label="Вероятность фрагментации"><span class="val">{{items.bullet_frag}}</span></td>
              <td data-label="Скорость (м/сек)"><span class="val">{{items.speed}}</span></td>
              <td data-label="Вероятность рикошет"><span class="val">{{items.ricochet}}</span></td>
            </tr>
          </template>
        </template>

Comments

[Дмитрий Беляев]

я правильно понимаю, что блок v-if отличается от блока v-else только наличием атрибута data-label у tr?

[Erl]

Дмитрий Беляев, да нет, они идентичны, просто я игрался с атрибутами, ниже ответ верно истолковал

"Если нужный калибр, то отобразить данные
Иначе отобразить данные"

но, не могу додуматься, как показывать всё, но если выбран определенный калибр, то убрать всё остальное, кроме него

[0xD34F]

не могу додуматься, как показывать всё, но если выбран определенный калибр, то убрать всё остальное, кроме него

С этого и надо было начинать, а не рассказывать сказки про "неработающий" v-if.

[Erl]

0xD34F, продублирую комментарий

разве он не должен остановиться после v-if = true? и не делать v-else
То есть, Если нужный калибр, то отобразить данные по этому калибру
Иначе (если не найден (false)), Отобразить все данные

[0xD34F]

Erl, вы не комментарии дублируйте, а вопрос исправляйте. Уберите эту омерзительную чушь про v-if, и изложите свою настоящую проблему. Или новый вопрос оформляйте.

[Erl]

0xD34F, спасибо за ценные ответы
"Куратор тега флуд"

[0xD34F]

Erl, какой вопрос - такой ответ.

[Erl]

0xD34F, вполне нормальный вопрос, почему отрабатывает v-else, когда v-if истина?

[0xD34F]

Erl, ага, нормальный. Из серии "было лень документацию читать".

Answer 1

[Rsa97]

Так у вас записано:

Если нужный калибр, то отобразить данные
Иначе отобразить данные

То есть, данные отображаются в любом случае.

Comments

[Erl]

не подскажите, как верно оформить?

[kuzubina]

v-if="data.caliber !== caliber"

[Erl]

Rsa97 разве он не должен остановиться после v-if = true? и не делать v-else
То есть, Если нужный калибр, то отобразить данные по этому калибру
Иначе (если не найден (false)), Отобразить все данные

[starwars9isgreatlol]

Erl, я не понял чем шаблон внутри v-if отличается от шаблона внутри v-else

if(data.caliber == caliber) {
    alert('hello world')
} else {
    alert('hello world')
}

[Rsa97]

Erl, if/else значит, что срабатывает либо первая ветка (если условие выполняется), либо вторая (если оно не выполняется). Так как у вас обе ветки одинаковые, то без разницы, какая из них сработает.
Если у элемента значение caliber совпадает с заданным, то срабатывает ветка if и выводит данные. Иначе (если значение не совпадает), то срабатывает ветка else и выводит то же самое.
Просто уберите полностью ветку else.

[Erl]

Rsa97, но тогда, если caliber пустой, то и данных нет

[Rsa97]

Erl,

<template v-if="caliber === '' || data.caliber == caliber">

[Erl]

Rsa97, спасибо, получается, я должен был 2 условия в 1 if указать....
понял свою ошибку, спасибо