动态更改 vuetify v-alert prop

Question

我正在尝试通过一种方法更改 v-alert 组件类型，但我似乎不知道如何更改。到目前为止，这是我的代码：

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

我想我可以将 alertType 绑定到我通过方法操作的数据变量，但它似乎不起作用。有办法吗？

谢谢！

Answer 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"
    };
  }
});

Answer 2

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

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

或者干脆

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

动态更改 vuetify v-alert prop

Dynamically change vuetify v-alert prop

vue.js

vuetify.js