I'm creating a Vue.js component that will serve a form on my site.

I want this form component to be used for both create, and edit.

For this, I rely on loading a prop `project` with a `project` object. The presence, or absence of this object, on load, will tell me if it's an edit form, or a create form, respectively.

The problem is, if I want to use this as an edit form, then I want the form data to be prefilled. To do this, I'm left with these ugly ternary operators that check for the property, and if it's present, fill the key.

```
data() {
    return {
        form: {
            id: (this.project ? this.project.id : ''),
            name: (this.project ? this.project.name : ''),
            description: (this.project ? this.project.description : ''),
        }
    };
},

```

I'm still fairly new to Vue.js and I'm trying to grasp the correct way to do things. This method feels wrong, and so I'm pretty sure there's a better way. Can you help me out?

My goal is to prefill the form on edit mode, and have the form filled with empty values if it's in create mode.