动态改变 vuetify v-alert prop答案

【问题标题】：Dynamically change vuetify v-alert prop动态改变 vuetify v-alert prop
【发布时间】：2021-09-09 15:31:26
【问题描述】：

我正在尝试从方法更改 v-alert 组件类型，但我似乎无法弄清楚如何。到目前为止，这是我的代码：

   <v-alert type="{{alertType}}">
    I'm a success alert.
  </v-alert>

我以为我可以将 alertType 绑定到我通过方法操作的数据变量，但它似乎不起作用。有没有办法做到这一点？

谢谢！

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

您需要导入 CSS Vuetify.js 文件。请在设置部分检查此example 代码和链接导入。

<div id="app">
  <v-app id="inspire">
    <div>
      <v-alert :type="types">
        I'm an alert with a top border and red color
      </v-alert>
    </div>
  </v-app>
</div>

js代码：

new Vue({
  el: "#app",
  vuetify: new Vuetify(),
  data() {
    return {
      types: "success"
    };
  }
});

【讨论】：

使用 :type 而不是 type 似乎会返回此错误：[Vue warn]: Invalid prop: custom validator check failed for prop "type"。但是常规类型不允许绑定。有什么想法吗？
v-alert 有 4 种类型。如果你使用不定词，就会出现这个错误，你可以将这些类型放入 data() 类型中： 1-success 2-info 3-warning 4-error
我想我的问题是我没有将初始值设置为 4 种类型之一。谢谢！

【解决方案2】：

属性中不再允许模板语法。如果要将属性绑定到数据属性，则应使用v-bind: 或其简写形式:

<v-alert v-bind:type="alertType">
    I'm a success alert.
</v-alert>

或者干脆

<v-alert :type="alertType">
    I'm a success alert.
</v-alert>

【讨论】：