Vue JS мутантная опора с компонентом оповещения

Question

Я использую компоненты VueStrap на основе: https://wffranco.github.io/vue-strap/ К сожалению, я получаю сообщение об ошибке при настройке видимости для оповещения, мой код:

HTML:

<alert :show="showAlert" placement="top-right" :duration=3000 v-bind:type="alertType" style="height:90px; min-width:380px;" dismissable>
      <span class="icon">
        <i style="font-size: xx-large;" class="fa fa-check-circle" v-if="alertType==='info'"></i>
        <i style="font-size: xx-large;" class="fa fa-info-circle" v-if="alertType==='danger'"></i>
        <i style="font-size: xx-large;" class="fa fa-check-circle" v-if="alertType==='success'"></i>
      </span>
      <div class="alertContent">
        <strong v-if="alertType==='success'">Success</strong>
        <strong v-if="alertType==='danger'">Error</strong>
        <p v-html="AlertInside"></p>
      </div>
</alert>

Пока я связываю: покажи на основе showAlert, все работает нормально, но я получаю ошибку, что "

Избегайте прямого изменения объекта, поскольку значение будет перезаписываться всякий раз, когда родительский компонент будет перерисовываться. Вместо этого используйтеданные или вычисляемое свойство, основанное на значении проп. Мутация пропеллера: «show» найдена в ---> Alert>

Я пробовал v-модель: show.sync, но vmodel не работаетвообще, и .sync не имеет никакого значения.

На github есть информация, что требуется vue js 2.1.x, но я видел где-то сообщение о том, что у кого-то возникла проблема с simillar при использовании vue 1.0. Моя текущая версия vue2.5.16

Я какое-то время ищу решение, но не могу найти правильных ответов, пожалуйста, помогите;)

Answer 1

Так как @ Jayem163 упомянул, это предупреждение возникает, когда я пытаюсь обновить переменную оповещения дочернего компонента show.Я обнаружил, что эта проблема была в компоненте VueStrap, и после отключения оповещения произошло нечто подобное:

watch: {
    show(val) {
      if (this._timeout) clearTimeout(this._timeout)
      if (val && Boolean(this.duration)) {
        this._timeout = setTimeout(() => {
          this.show = false; ---> this i changed to :this.$emit('update:show', false ); AND IT WORKS WITHOUT ERROR :)
        }, this.duration)
      }
    }
  }