how to concatenate string and variable in Vue js

Question

How to concatenate string with two adding variable use Vuejs. i have used below code but string i am not able to concatenate to variables. please check and solve my issue.

<div id = "vue_det">
    <h1>Firstname : {{firstname}}</h1>
    <h1>Lastname : {{lastname}}</h1>
    <h1>{{test()}}</h1>
    </div>
    <script type = "text/javascript" src = "js/vue_instance.js"></script>
    <script>

     var  vm = new Vue({
   el: '#vue_det',
   data: {
      firstname : 10,
      lastname  : 20,

   },
   methods: {
      test : function() {

         return "result"+ this.firstname+this.lastname;
      }
   }
})
     </script>
   </body>

When you run the code you posted what happens? In what way does it not work? Do you see an error or is the output simply not what you wanted? If so, in what way is it wrong? — skirtle
– skirtle, Commented Jan 23, 2020 at 2:30
I believe you're looking for return "result" + (this.firstname + this.lastname);, with parentheses to ensure the numbers are added as numbers. I suggest giving them better names than firstname and lastname as those property names do imply that you'd want string concatenation and not number addition. — skirtle
– skirtle, Commented Jan 23, 2020 at 2:37

tony19 · Accepted Answer · 2022-07-15 01:40:58Z

3

you don't want a method, you want a computed.

computed: {
      test : function() {

         return "result = "+ (this.firstname+this.lastname);
      }
   }

then use it as if it wasn't a method, but another property

{{test}}

see https://v2.vuejs.org/v2/guide/computed.html for comprehensive documentation on computed properties.

edited Jul 15, 2022 at 1:40

tony19

140k23 gold badges281 silver badges354 bronze badges

answered Jan 23, 2020 at 2:28

Keith Nicholas

44.4k15 gold badges101 silver badges168 bronze badges

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

2 Comments

sundar Over a year ago

i need anwser result =30

Keith Nicholas Over a year ago

@sundar for that, you need to bracket the int addition because it will turn into string concatination the way you have done it so "result = " + (this.firstname+this.lastname)

Hashem Ahmed · Accepted Answer · 2024-01-29 11:07:41Z

0

you need to add your string and variable in (): something like this example for key

<li v-for="(x,i) in DataTable" :key="('item-' + x.Id)"></li>

answered Jan 29, 2024 at 11:07

Hashem Ahmed

1111 silver badge4 bronze badges

6 Comments

t.niese Over a year ago

Are you sure ( ) are required? I just tested it for vue2 and vue3, and neither of them requires braces.

Hashem Ahmed Over a year ago

Not necessary But it avoids different issues that I faced myself. Its presence is unnecessary in some cases. In other cases, it avoids unexpected issues Because variable may contain unexpected characters. Its placement is suitable for all situations and avoids issues.

t.niese Over a year ago

But then, in this case, the answer is misleading because, for this question, the missing braces are not the problem (and adding them is not the solution). You for sure can add the information that it makes sense to add them with an example why.

Hashem Ahmed Over a year ago

actually, my Answer is the best for him, he used function to concatenate string and variable my example more benefit to explain how he can concatenate. and this for his example <h1>{{('result'+ firstname + lastname)}}</h1>

t.niese Over a year ago

I didn't say that {{ 'result'+ firstname + lastname }} is wrong, I think that is actually a good solution. What I said is that your answer is you need to add your string and variable in () but the ( ) are - for most cases (in case you are right) - is not required. That's why I said that the answer is misleading.

|

Collectives™ on Stack Overflow

how to concatenate string and variable in Vue js

2 Answers 2

2 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related