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

Question

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/

Answer 1

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.