时间戳

首页 > 解决方案 > 如何更改 v-alert 内部文本/html？

vue.js - 如何更改 v-alert 内部文本/html？

问题描述

我使用vuetifyandvue-property-decorator来显示警报：

<v-alert dismissible :value="true" color="error" icon="new_releases">
  some text.. some text.. <a @click="changeTheAlertMessage">click me</a>.
</v-alert>

如何通过单击 a 按钮更改内部文本/html？

@Component({})
export default class SomeView extends Vue {
  changeTheAlertMessage() {
    //here: How I access to alert instance???
  }
}

标签： vue.jsvuetify.js

解决方案

在这里您可以找到一个工作示例。

使用的方法如下：

  1. 将您想要更改的文本建模为反应性数据变量；
  2. 定义一个名为 的方法changeTheAlertMessage()，旨在根据您的需要更改文本。

我的意思是这样的：

new Vue({
  el: '#app',
  data () {
    return {
      messageToChange: "Original text"
    }
  },

  methods: {
    changeTheAlertMessage: function(event) {
     this.messageToChange = "New text"
    }
  }
})

推荐阅读