vue.jsにどのようにネストされたバインディングスコープを作成しますか？

Question

Vueインスタンスでは、ネストされたビューモデルを作成できます。 form.firstNameとform.lastName：あなたが見ることができるようにたとえば、次のよう

new Vue({ 
    el: '#app', 
    data: { 
    form: { 
     firstName: "Joe", 
     lastName: "Bloggs" 
    } 
    }, 
    computed: { 
    name: function() { 
     return this.form.firstName + ' ' + this.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

Vueにノックアウトのwith bindingのシンプルなアナログはありますか？

Answer 1

限り、あなたは値を繰り返していないので、あなたは、私の知る限りでは

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