Question

我正在创建一个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的新手，我正在努力掌握正确的做事方式。这种方法感觉不对，所以我很确定有更好的方法。你能救我一下吗？

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

Answer 1

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

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

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

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

Answer 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/

正确的预填数据方法（）

2 个答案: