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>

Answer 1

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.