[Vuejs]-Correct Method of Prefilling data()

by

0👍

This is the same approach I would use, however I would avoid nesting it in an object you need to test for and the ternary operators and simplify it with:

    form: {
        id: this.id || '',
        name: this.name || '',
        description: this.description || ''),
    }

The approach you’re using with the project object isn’t something I’ve seen. From what I’ve seen, I think it’s more common in Vue.js to deal with complexity through components.

This repo (and the accompanying tutorial) has a good example of this, with the Note component Create.vue having the data and Index.vue applying rules when the form is presented.

0👍

You do not need to initialize the data of component:

template: `
  <div>
    id: <input type="text" v-model="project.id" number>
    name: <input type="text" v-model="project.name">
    description: <input type="text" v-model="project.description">
  </div>
`,
props: {
  project: {
    type: Object,
    default: {}
  }
}

https://jsfiddle.net/pespantelis/1L9adm32/2/

Leave a comment