vue JS - Append data (strings) to a placeholder

Question

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?

Dmitry Arestov · Accepted Answer · 2022-03-11 08:06:14Z

1

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.

answered Mar 11, 2022 at 8:06

Dmitry Arestov

1,70815 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Istiake · Accepted Answer · 2022-03-11 08:38:39Z

0

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"

answered Mar 11, 2022 at 8:38

Istiake

511 silver badge7 bronze badges

Collectives™ on Stack Overflow

vue JS - Append data (strings) to a placeholder

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related