Как создать вложенную область привязки в vue.js?

Question

Экземпляр Vue может позволить вам создавать вложенные модели просмотра. Например, рассмотрим следующий

new Vue({ 
    el: '#app', 
    data: { 
    form: { 
     firstName: "Joe", 
     lastName: "Bloggs" 
    } 
    }, 
    computed: { 
    name: function() { 
     return this.form.firstName + ' ' + this.form.lastName; 
    } 
    } 
}); 

Как вы можете видеть, есть вложенный объект форм-данных: form.firstName и form.lastName. Я могу связать это представление-модель для HTML со следующим:

<div id="app"> 
    <form> 
    <label> 
     First: 
     <input type="text" v-model="form.firstName"> 
    </label> 
    <label> 
     Last: 
     <input type="text" v-model="form.lastName"> 
    </label> 
    </form> 
    <div> 
    You are: {{name}} 
    </div> 
</div> 

Here's a JS Fiddle for this Vue.js example

Теперь мой вопрос: есть ли простой способ (например, директива), чтобы создать вложенный связывающий объем, который позволяет мне для адреса firstName и lastName без предыдущей «формы»?

Knockout.js имеет with binding, который позволяет явно указать область привязки в зависимости от вашей модели представления. Here is a JS Fiddle showing Knockout.js using the with binding

Есть ли простой аналог для нокаута with binding в Vue?

Answer 1

До тех пор, пока вы не повторили значение, вы могли бы псевдоним его расчетную собственность как

computed: { 
    firstName: function() { 
    return form.firstName 
    }, 
    lastName: function() { 
    return form.lastName 
    } 
}