So I have this basic VUE.js page, but I want variable C to be a posite of variable A and B together.

var app = new Vue({
  el: '#app',
  data: {
    firstname: '',
    lastname: '',
    fullname: firstname + lastname
  }
})

so I can use it in a <input type="text" v-model="fullname"> and it will contain the values of firstname and lastname.

firstname and lastname will be binded to 2 other inputs as follows:

<label>Insert your first name:</label>
<input type="text" v-model="firstname">
<label>Insert your last name:</label>
<input type="text" v-model="lastname">

so the fullname variable will be a dynamically binded firstname + lastname variable.

I've tried several things but I can't seem to get this working.

So I have this basic VUE.js page, but I want variable C to be a posite of variable A and B together.

var app = new Vue({
  el: '#app',
  data: {
    firstname: '',
    lastname: '',
    fullname: firstname + lastname
  }
})

so I can use it in a <input type="text" v-model="fullname"> and it will contain the values of firstname and lastname.

firstname and lastname will be binded to 2 other inputs as follows:

<label>Insert your first name:</label>
<input type="text" v-model="firstname">
<label>Insert your last name:</label>
<input type="text" v-model="lastname">

so the fullname variable will be a dynamically binded firstname + lastname variable.

I've tried several things but I can't seem to get this working.

• javascript
• vue.js
• vuejs2
• vue-ponent

Share Improve this question Follow asked Aug 13, 2017 at 21:40 KevinKevin 97911 gold badge88 silver badges1414 bronze badges 3

• Do you want the fullname to be an input? – Bert Commented Aug 13, 2017 at 21:41
• Check: Computed Properties – Gerardo Commented Aug 13, 2017 at 21:43
• 2 The reason I ask is because typically you will do this with a puted property, but if you bind it to an input what do you expect to happen when the user changes the fullname input. Do you expect the value to be split out into first name and last name and how do you expect to acplish that? By spaces? Etc. – Bert Commented Aug 13, 2017 at 21:45

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

Use puted properties.

var app = new Vue({
  el: '#app',
  data: {
    firstname: '',
    lastname: ''
  },
  puted: {
    fullname: function(){
        return this.firstname + ' ' + this.lastname;
    }
  }
});

You have a property that is dependent on other properties. So use puted.

var app = new Vue({
  el: '#app',
  data: {
    firstname: '',
    lastname: ''
  },
  puted: {
    fullname: function () { 
      return `${this.firstname} ${this.lastname}` 
    }
  }
})

There is this exact example in the doc.

Working code snippet, with some additional checks, so the fullname is editable too:

 var app = new Vue({
  el: '#app',
  data: {
      firstname: 'Foo',
      lastname: 'Bar'
    },
    puted: {
      fullname: {
        // getter
        get: function () {
          return this.lastname ? this.firstname + ' ' + this.lastname : this.firstname
        },
        // setter
        set: function (newValue) {
          if (newValue.indexOf(' ') !== -1) {
              var names = newValue.split(' ')
              this.firstname = names[0]
              this.lastname = names[1] ? names[1] : ''
          } else {
              this.firstname = newValue
          }
        }
      }
    }
})

<div id="app">
<label>Insert your first name:</label>
<input type="text" v-model="firstname">
<label>Insert your last name:</label>
<input type="text" v-model="lastname">
<label>Insert your full name:</label>
<input type="text" v-model="fullname">
</div>
<script src="https://unpkg./[email protected]/dist/vue.min.js"></script>