Во VueJs при изменении переменной не срабатывает v-if, почему?

Question

[lyyb]

Необходимо, чтобы при изменении значения search изменялся цвет кнопок сверху в зависимости от элемента массива tip. Все работает и console log выводит все верно, но почему-то v-if не изменяет элемент.

<template>
  <div id="app">
    <div class="container">
      <div class="row-12 text-center pt-5">
        <h1>Проверка медицинского страхования</h1>
      </div>
      <div class="row-12 d-flex justify-content-center pt-5">
        <div class="btn-group" role="group">
          <button 
          type="button" 
          class="btn btn-danger"
          v-if="!tipStrah"
          @click="tipStrah = tipStrah + 1"
          >ОМС</button>
          <button 
          type="button" 
          class="btn btn-light"
          v-if="tipStrah"
          @click="tipStrah = !tipStrah"
          >ОМС</button>
          <button 
          type="button" 
          class="btn btn-danger"
          v-if="tipStrah"
          >ДМС</button>
          <button 
          type="button" 
          class="btn btn-light"
          v-if="!tipStrah"
          @click="tipStrah = tipStrah + 1"
          >ДМС</button>
        </div>
      </div>
      <form>
        <div class="row pt-5">
          <div class="col">
            <input type="text" 
            class="form-control round" 
            id="search" 
            v-model="search"
            placeholder="Введите номер полиса">
          </div>
          <div class="col">
            <div class="form-group">
              <select class="form-control round" 
              id="companyStrah">
                <option selected disabled
                style="display: none;">
                  Выберите страховую компанию
                </option>
                <option selected
                v-if="filteredPolis.length < 4"
                v-for="(polis, company) in filteredPolis">
                {{ polis.company }}
                </option>
                <option
                v-if="filteredPolis.length < 1"
                v-for="company in companys">
                {{ company.company }}
                </option>
              </select>
            </div>
          </div>
          <div class="col-12 pt-5">
            <label for="reqSer" class="pl-3">Выберите медицинские услуги</label>
            <input type="text" 
            class="form-control round mt-3" 
            id="reqSer" 
            placeholder="Введите запрашиваемую услугу для пациента">
          </div>
          <div class="col-12 pt-5 text-center">
            <button type="submit" class="btn btn btn-outline-danger round w-15 mt-5">Проверить</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</template>

<script>
const polis = (number, company, tip, dataEnd, phone) => ({number, company, tip, dataEnd, phone});

const company = (company) => ({company});

const companys = [
company(),
company('СК МЕД-АСКЕР'),
company('СК Рандеву'),
company('Страх-трах')
]

const poliss = [
polis('1234 12345678', 'СК МЕД-АСКЕР', 'dmc', '14.08.2020', '8(495)123-45-67'),
polis('9876 543210', 'СК МЕД-АСКЕР', 'omc',
  '15.08.2021', '8(495)123-45-67'),
polis('1234-123456-78', 'СК Рандеву', 'dmc', '14.08.2020', '8(499)123-45-68'),
polis('98-76 5432-10', 'СК Рандеву', 'omc',
  '15.08.2021', '8(499)123-45-68'),
polis('12-341234-5678', 'Страх-трах', 'dmc', '14.08.2020', '8(812)123-45-69'),
polis('98-76 5432-10', 'Страх-трах', 'omc',
  '15.08.2021', '8(812)123-45-69')
]


export default {
  name: 'app',
  data () {
    return {
      companys, companys,
      poliss: poliss,
      search: '',
      tipStrah: ''
    }
  },
  computed: {
    filteredPolis() {
      return this.poliss.filter(polis => {
        return polis.number.indexOf(this.search) > -1
      })
    }
  },
  watch: {
    search: function(filteredPolis, tipStrah) {
      this.filteredPolis.forEach(polis => {
      if (polis.tip.indexOf('dmc')) {tipStrah = true}
      else if (polis.tip.indexOf('omc'))  {tipStrah = false}
      return tipStrah
      })
      console.log(tipStrah)
      return tipStrah
    }
  }
}
</script>

<style>
.round {
  border-radius: 25px;
}
.w-15 {
  width: 15%;
}
</style>

Comments

[Сергей delphinpro]

Bad

<button 
          type="button" 
          class="btn btn-danger"
          v-if="!tipStrah"
          @click="tipStrah = tipStrah + 1"
          >ОМС</button>
          <button 
          type="button" 
          class="btn btn-light"
          v-if="tipStrah"
          @click="tipStrah = !tipStrah"
          >ОМС</button>

Better

<button 
          type="button" 
          class="btn"
          :class="tipStrah ? 'btn-light' : 'btn-danger'"
          @click="tipStrah = !tipStrah"
          >ОМС</button>

Answer 1

[Alams Stoyne]

V-if придуман не для стилей. прочитай Документацию вопрос отпадет

Answer 2

[Игорь]

Вот здесь что вы пытаетесь сделать?

watch: {
    search: function(filteredPolis, tipStrah) {
      this.filteredPolis.forEach(polis => {
      if (polis.tip.indexOf('dmc')) {tipStrah = true}
      else if (polis.tip.indexOf('omc'))  {tipStrah = false}
      return tipStrah
      })
      console.log(tipStrah)
      return tipStrah
    }

Вы же установили наблюдателя за search и любые изменения переменной search будут вызывать

search(val) {
     val // это значение переменой search в data
      })

Comments

[lyyb]

В данном блоке пытался сделать, чтобы при каждом изменении search проверялось, содержит ли отфильрованный массив 'omc' или 'dmc'. Не могли бы поподробнее описать мою ошибку, я еще новичек в VueJS.

[Игорь]

lyyb, Обратите внимание на пример.
Вам сразу станет ясно.