vue JS - Append data (strings) to a placeholder-CodePudding

I am a absolut beginner with vue.js. So I did a little app for learning. But I stuck a little bit with append-Data to a placeholder, if that is the right term, for

{{ message1 }}

Here is my code:

<script>
Vue.createApp({
data() {
  return {
  bheight: '',
  bwidth: '',
  
}
},
methods: {
  domath(event) {
    alert(`Hello!`)
    
    
  }
}
}).mount('#app')
</script>

The "domath" method is triggred by a button. That work (the allert show up). I have this placeholder "message1. {{ message1 }}

What I want is this: If the button is clicked, I want the data from "bheight" and "bwidth" appends to the placeholder {{ message1 }}

Later I want to do a math with this both variables. And append the result in the placeholder.

Id do not figured out how I can to this. Can some help me please?

CodePudding user response：

You need to have an additional variable:

data() {
  return {
    bheight: '',
    bwidth: '',
    message1: ''
 }

And then:

domath(event) {
   this.message1  = this.bwidth   ', '   this.bheight;

}

Using this is crucial iin this context.

CodePudding user response：

Try something like this:

Add computed Property

computed: {
   placeholder() {
      return this.errors.has('end_date') ? 'Your placeholder text' : ''
   }
}

Next Steps:

Bind to your computed placeholder property with v-bind:placeholder="placeholder"