预填充数据的正确方法（）答案

【问题标题】：Correct Method of Prefilling data()预填充数据的正确方法（）
【发布时间】：2016-06-03 20:24:01
【问题描述】：

我正在创建一个 Vue.js 组件，它将在我的网站上提供一个表单。

我希望这个表单组件同时用于创建和编辑。

为此，我依赖于加载带有 project 对象的道具 project。加载时此对象的存在或不存在将分别告诉我它是编辑表单还是创建表单。

问题是，如果我想将其用作编辑表单，那么我希望预先填写表单数据。为此，我留下了这些丑陋的三元运算符来检查属性，如果存在，请填写键。

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

我对 Vue.js 还是很陌生，我正在尝试掌握正确的做事方式。这种方法感觉不对，所以我很确定有更好的方法。你能帮帮我吗？

我的目标是在编辑模式下预填充表单，如果处于创建模式，则用空值填充表单。

【问题讨论】：

标签： javascript forms vue.js

【解决方案1】：

这与我将使用的方法相同，但是我会避免将其嵌套在您需要测试的对象和三元运算符中，并使用以下方法对其进行简化：

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

您对project 对象使用的方法不是我见过的。从我所见，我认为在 Vue.js 中通过组件来处理复杂性更为常见。

This repo（和随附的教程）有一个很好的例子，Note component Create.vue 拥有数据，Index.vue 在表单出现时应用规则。

【讨论】：

【解决方案2】：

组件的数据不需要初始化：

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/

【讨论】：