带有警报组件的 Vue JS 变异道具答案

【问题标题】：Vue JS mutating prop with Alert component带有警报组件的 Vue JS 变异道具
【发布时间】：2019-03-03 10:29:02
【问题描述】：

我正在使用基于：https://wffranco.github.io/vue-strap/ 的 VueStrap 组件不幸的是，我在设置警报可见性时收到错误，我的代码：

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 显示一切正常，但我收到一个错误“

避免直接修改 prop，因为每当父组件重新渲染时，该值都会被覆盖。相反，使用基于道具值的数据或计算属性。正在变异的道具：在 --->Alert>
中找到“show”

我尝试过 v-model, :show.sync 但 vmodel 根本不起作用， .sync 没有任何区别。

在 github 上有需要 vue js 2.1.x 的信息，但我在某处看到有人在使用 vue 1.0 时遇到类似问题。我目前的vue版本是2.5.16

我搜索了一段时间的解决方案，但我无法得到任何正确的答案，请帮助;)

【问题讨论】：

警报组件必须尝试更改“showAlert”的值。它应该发出类似“alertClosed”的内容，此时您可以在父组件中将“showAlert”设置为 false。不确定您给出的操作是否只是 vuestrap 中的一个问题，或者您是否以某种方式在警报组件中操作了“显示”道具，但这似乎是警告所表明的。

标签： asp.net-mvc model-view-controller vue.js vuejs2 vue-component

【解决方案1】：

正如@Jayem163 提到的，当我尝试更新子组件警报变量显示时会发生此警报。我发现这个问题出现在 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)
      }
    }
  }

【讨论】：