How to set up VueJS second level data property to an input value?

Question

I have this html code:

<div id="app">
    <input type="text" name="username" value="user.name">
</div>

With this Vue.js code:

new Vue({
    el: '#app',
    data: {
           user: {
                   name: 'John Doe',
                   age: 20
           },
           // etc...
    }
});

How can I show the Vue's data.user.name propertie's value in input filed?

If I try this:

<input type="text" name="username" v-model="user.name" value="user.name">

Then it says user is not defined

Vamsi Krishna · Accepted Answer · 2017-06-30 10:37:33Z

1

You can bind the value attribute using v-bind

<input type="text" name="username" v-bind:value="user.name">

Or using the shorthand of v-bind

    <input type="text" name="username" :value="user.name">

Or use a v-model

       <input type="text" name="username" v-model="user.name">

Here is the fiddle

edited Jun 30, 2017 at 10:37

answered Jun 30, 2017 at 10:21

Vamsi Krishna

31.4k8 gold badges73 silver badges81 bronze badges

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

Collectives™ on Stack Overflow

How to set up VueJS second level data property to an input value?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related