如何綁定輸入到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' 
     } 
     }; 
    } 
})