Vue.JS - Combine Variable

Question

 
    <script>
    var app = new Vue ({
        el: '#app',
        
        data : {
            sentence: ''
        },
      
            
        methods: {
            
            Q: function () {
                this.sentence = "Q"
            },
            
             W: function () {
                this.sentence = "W"
            },
            
             E: function () {
                this.sentence = "E"
            },
            
             R: function () {
                this.sentence = "R"
            },
            
             T: function () {
                this.sentence = "T"
            },
            
             Y: function () {
                this.sentence = "Y"
            }
            
        } 
        
    })
        
    
    </script>

  <div id="app">
   <p>Sentence : {{ sentence }}</p>
    <button @click="Q">Q</button>
    <button @click="W">W</button>
    <button @click="E">E</button>
    <button @click="R">R</button>
    <button @click="T">T</button>
    <button @click="Y">Y</button>
   
   </div>

The program is working. But first of all the user click 'Q' and after that click 'W', the input seems 'W' , i want this input: "QW" , it should be combine.

For example the user click Q, W and E, the input should be "QWE". How can i combine all of them? Maybe its easy but i couldnt find anywhere. I am beginner on VueJS

Can you help me?

LouLav · Accepted Answer · 2020-09-25 07:54:20Z

You can easily concat the string from your template @click event like so :

Method 1

<div id="app">
 <p>Sentence : {{ sentence }}</p>
 <button @click="sentence += 'Q'">Q</button>
 <button @click="sentence += 'W'">W</button>
 <button @click="sentence += 'E'">E</button>
 <button @click="sentence += 'R'">R</button>
 <button @click="sentence += 'T'">T</button>
 <button @click="sentence += 'Y'">Y</button>
</div>

Method 2

<div id="app">
 <p>Sentence : {{ sentence }}</p>
 <button @click="addToSentence('Q')">Q</button>
 <button @click="addToSentence('W')">W</button>
 <button @click="addToSentence('E')">E</button>
 <button @click="addToSentence('R')">R</button>
 <button @click="addToSentence('T')">T</button>
 <button @click="addToSentence('Y')">Y</button>
</div>

with a dedicated method

data() {
 return {
  sentence: ''
 }
},

methods: {
 addToSentence(letter) {
  this.sentence += letter
 }
}

Method 3

<div id="app">
 <p>Sentence : {{ sentence }}</p>
 <button v-for="letter in ['Q','W','E','R','T','Y']" @click="addToSentence(letter)">{{ letter }}</button>
</div>

with a dedicated method

data() {
 return {
  sentence: ''
 }
},

methods: {
 addToSentence(letter) {
  this.sentence += letter
 }
}

Method 4

More compact

<div id="app">
 <p>Sentence : {{ sentence }}</p>
 <button v-for="letter in ['Q','W','E','R','T','Y']" @click="sentence += letter">{{ letter }}</button>
</div>

data() {
 return {
  sentence: ''
 }
},

Ilijanovic · Accepted Answer · 2020-09-25 07:41:18Z

What you looking for is called concatenation

add an + infront of =

Example:

this.sentence = "Q" to this.sentence += "Q"

Thats the same as if you would write: this.sentence = this.sentence + "Q" its just a shortcut

  var app = new Vue ({
        el: '#app',
        
        data : {
            sentence: ''
        },
        methods: {
            
            Q: function () {
                this.sentence += "Q"
            },
            
             W: function () {
                this.sentence += "W"
            },
            
             E: function () {
                this.sentence += "E"
            },
            
             R: function () {
                this.sentence += "R"
            },
            
             T: function () {
                this.sentence += "T"
            },
            
             Y: function () {
                this.sentence += "Y"
            }
            
        } 
        
    })

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
   <p>Sentence : {{ sentence }}</p>
    <button @click="Q">Q</button>
    <button @click="W">W</button>
    <button @click="E">E</button>
    <button @click="R">R</button>
    <button @click="T">T</button>
    <button @click="Y">Y</button>
   
   </div>

Collectives™ on Stack Overflow

Vue.JS - Combine Variable

2 Answers 2

Method 1

Method 2

Method 3

Method 4

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Method 1

Method 2

Method 3

Method 4

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related