3

I use vuetify and vue-property-decorator for display an alert:

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

How I change the inner text/html by clicking on the a-button?

@Component({})
export default class SomeView extends Vue {
  changeTheAlertMessage() {
    //here: How I access to alert instance???
  }
}
Weved
  • 813
  • 2
  • 9
  • 20

1 Answers1

1

Here you can find a working example.

The approach used is the following:

  1. model the text you will like to change as a reactive data variable;
  2. define a method, named changeTheAlertMessage(), aimed to change the text according to your needs.

I mean like this:

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

  methods: {
    changeTheAlertMessage: function(event) {
     this.messageToChange = "New text"
    }
  }
})
P3trur0
  • 3,155
  • 1
  • 13
  • 27