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