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>