VueJS数据对象是2个数据对象组合

Question

所以我有这个基本的VUE.js页面，但我希望变量C是变量A和B的组合。

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

这样我就可以在<input type="text" v-model="fullname">使用它，它包含的名字和姓氏的值。

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

所以全名变量将是一个动态绑定姓名+姓氏变量：

名字和姓氏下面将绑定到其他2个输入。

我试了几件事，但我似乎无法得到这个工作。

Answer 1

使用computed properties。

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

Answer 2

您有一个属性取决于其他属性。 所以使用计算。

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

Answer 3

有这个确切的例子in the doc。

工作的代码片段，有一些额外的检查，所以fullname是编辑过：

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/vue@2.4.2/dist/vue.min.js"></script>