CODEWITHSUNDEEP
javascriptvue.jsvuejs2
Hkm Sadek
Hkm Sadek

Reputation: 3209

How to bind values dynamically in v-model in vue 2

I am facing an interesting problem. I have two tables of a user. One table is users and another is information. Now when signing up, userinfo table can be blank or filled. If filled then there is no problem.

The problem, when I create a form to update/create(new record of userinfo as he didn't provide while signing up.) I try to get data from database and store in an object. Something like this 

    data(){
      return {
          data:user[0].userinfo
        }
    },

and in my form I auto populate the form using v-model 

<input type="text" v-model="data.address" />

Clearly you see the problem. Since this user has no records, the value of data will null

On the other hand if the user provide the userinfo while signing up, these issue doesn't exists as there will be data.

How can I solve this errors?

Currently what I do is create conditional forms mean two forms. One for editing for the user whose data is available and one for editing. But I have to create two forms and some extra coding. Is there any ways we escape errors and work with one form? Thank you/

Upvotes: 1

Views: 162

Answers (1)

thanksd
thanksd

Reputation: 55634

You could define your data property first as an empty object with all of the properties required by the form and then assign that object the userinfo:

data() {
  let userData = {
    address: '',
    name: '',
    email: '',
  }

  return {
    data: Object.assign(userData, user[0].userinfo);
  }
},

This way, if there is no data in user[0].userinfo your data property will still have all of its needed properties defined.

Upvotes: 2

Related Questions