VueJS data object is 2 data objects combined

Question

So I have this basic VUE.js page, but I want variable C to be a composite 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.

The reason I ask is because typically you will do this with a computed 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 accomplish that? By spaces? Etc. — Bert
– Bert, Commented Aug 13, 2017 at 21:45

tony19 · Accepted Answer · 2022-07-15 20:40:45Z

8

Use computed properties.

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

edited Jul 15, 2022 at 20:40

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Aug 13, 2017 at 21:45

balping

8,0783 gold badges28 silver badges36 bronze badges

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

Comments

Srinivas Damam · Accepted Answer · 2017-08-15 21:24:57Z

1

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

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

edited Aug 15, 2017 at 21:24

answered Aug 13, 2017 at 21:45

Srinivas Damam

3,0652 gold badges20 silver badges26 bronze badges

Comments

tony19 · Accepted Answer · 2022-07-16 00:23:01Z

1

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'
    },
    computed: {
      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.com/[email protected]/dist/vue.min.js"></script>

edited Jul 16, 2022 at 0:23

tony19

140k24 gold badges281 silver badges354 bronze badges

answered Aug 13, 2017 at 21:46

François Romain

14.5k17 gold badges95 silver badges128 bronze badges

1 Comment

François Romain Over a year ago

@Kevdev that's exactly what you asked for. <input type="text" v-model="fullname"> is in your question…

Collectives™ on Stack Overflow

VueJS data object is 2 data objects combined

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related