How can i bind input to object in vue.js

Question

Is there a way to bind input to objects instead of single variables.

I know we can do this simple trick

<input v-model="name">

But the following doesn't work:

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

That's what i was used to in Angular, is there a way to achieve this in vue.js?

sept08 · Accepted Answer · 2016-12-19 11:19:48Z

3

you can bind directly to data, code as follow:

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>

answered Dec 19, 2016 at 11:19

sept08

3452 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Saurabh · Accepted Answer · 2016-12-17 13:30:22Z

1

This works in Vue as well, make sure to define complete object in data which will make it reactive, Here is a working fiddle.

Vue Code:

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

edited Dec 17, 2016 at 13:30

answered Dec 17, 2016 at 12:48

Saurabh

73.8k44 gold badges193 silver badges251 bronze badges

Collectives™ on Stack Overflow

How can i bind input to object in vue.js

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related