CODEWITHSUNDEEP
vue.js
Christian Türling
Christian Türling

Reputation: 3

vue JS - Append data (strings) to a placeholder

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?

Upvotes: 0

Views: 248

Answers (2)

Istiake
Istiake

Reputation: 51

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"

Upvotes: 0

Dmitry Arestov
Dmitry Arestov

Reputation: 1678

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.

Upvotes: 1

Related Questions