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>

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>

• javascript
• html
• vue.js

• 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 Commented Jan 23, 2020 at 2:30
• 1 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 Commented Jan 23, 2020 at 2:37

2 Answers 2

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

puted: {
      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/v2/guide/puted.html for prehensive documentation on puted properties.

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>