vue.jsのオブジェクトに入力をバインドする方法

Question

単一変数の代わりにオブジェクトに入力をバインドする方法はありますか？

は、私たちはこの単純なトリック

<input v-model="name"> 

を行うことができます知っているが、以下では動作しません：私は角にするために使用されたものだ

<input v-model="user.name"> 

、これを達成する方法がありますvue.jsで？

Answer 1

あなたがデータに直接結合することができ、次のようにコード：

var demo = new Vue({ 
 
    el: "#demo", 
 
    data: { 
 
     user: { 
 
     name: "please enter" 
 
     } 
 
    } 
 
})

<script src="https://unpkg.com/vue/dist/vue.min.js"></script> 
 
<div id="demo"> 
 
    <input v-model="user.name"> 
 
    <span>{{user.name}}</span> 
 
</div>

Answer 2

これもVueで動作し、反応するようなデータに完全なオブジェクトを定義するようにしてください。fiddleがここにあります。

Vueのコード：

var demo = new Vue({ 
    el: '#demo', 
    data: function(){ 
     return { 
     user: { 
      name: 'This is working fine' 
     } 
     }; 
    } 
})