如何在 vue.js 中创建用于创建和编辑功能的简单模式？

Question

我正在尝试创建一个能够编辑现有数据的模型？我该怎么做？

我正在使用 <el-form> 创建一个新条目，在这种情况下，我正在创建问题，我想重新使用它进行编辑，并将条目中的数据添加到表单中。

这是我现在的表格

<el-dialog title="Nuevo" :loading="loading" :visible="dialogFormVisible" :visible.sync="dialogFormVisible">

    <el-form label-position="top" ref="form" :model="form" :rules="rules">
        <el-row>
            <el-form-item label="Pregunta" prop="question">
                <el-input v-model="form.question"></el-input>
            </el-form-item>
        </el-row>
        <el-row>
            <el-col :span="8">
                <el-form-item label="Seccion" prop="survey_section_id">
                    <el-select v-model="form.survey_section_id" placeholder="Selecionar">
                        <el-option v-for="section in survey_section" :key="section.id" :label="section.title"
                            :value="section.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="8">
                <el-form-item label="Tipo de Respuesta" prop="response_type">
                    <el-select v-model="form.response_type_id" placeholder="Selecionar">
                        <el-option v-for="type in response_type" :key="type.id" :label="type.type" :value="type.id">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
            <el-col :span="4">
                <el-form-item label="Opcional" prop="optional">
                    <el-switch v-model="form.optional"></el-switch>
                </el-form-item>
            </el-col>
        </el-row>
    </el-form>
    <span slot="footer">
        <el-button type="info" @click="dialogFormVisible = false">Cancelar
        </el-button>
        <el-button type="primary" :loading="loading" @click="submit('form')">Guardar
        </el-button>
    </span>
</el-dialog>

我需要做什么才能将其变成模态并将其用于我的编辑？

有任何问题都可以问我，我可以提供任何需要的代码。谢谢

Answer 1

这是一个常见问题。当然，其中很多事情都归结为个人喜好或意见，但这里有几点需要考虑：

通常在解决这个问题时，您会以某种方式（即列表）显示所有现有模型，并带有一个 "edit" 按钮。当我这样做时，我使用一个对象将模型 ID 映射到它们对应的模型对象作为这个列表的基础数据模型。这使得用更新版本 (models[model.id] = model) 替换模型变得容易。
直接将模型绑定到表单（例如：model="the model you want to edit"）通常是一个糟糕的实现。这是因为在编辑期间所做的任何更改都会立即写入模型。问题是，如果您的 save() 函数失败，那么您必须将所有内容改回来。更好的实现是克隆模型，并将 that 对象绑定到表单。
您可以为模态的 title/header 使用计算的属性。我通常有一个名为 mode 的数据属性，它将是 "Create" 或 "Edit"，然后我有一个计算属性 returns mode + ' Model'，其中 'Model' 是模型的名称 – 在您的例子中，"Pregunta".
由于 create 和 update 函数通常使用不同的 API 端点（和 HTTP 方法），您的 "Save / Update" 按钮需要调用正确的那一个。同样，我使用 mode 属性来处理这个问题（例如 <button @click="mode == 'edit' ? update : save">）

以下代码应该为您提供一个良好的起点，让您可以使用模态来创建和编辑模型，以及大多数 CRUD 组件的基本结构。

<template>
  <div>
    <template v-for="model in modelsArray">
      ... <!-- Display your existing models however you want -->
      <a href="" @click.prevent="edit(model)">Edit</a>
    </template>
    <button @click="create">Create New Model</button>
    <el-dialog
      :title="modalTitle"
      :loading="loading"
      :visible.sync="dialogFormVisible"
    >
      <el-form :model="formModel">
        ...
      </el-form>
      <span slot="footer">
        <el-button type="info" @click="cancel">Cancelar</el-button>
        <el-button
          type="primary"
          :loading="loading"
          @click="mode == 'edit' ? update : save"
        >
          {{ mode }}
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    mode: '',
    dialogFormVisible: false,
    loading: false,
    formModel: {},
    models: {            // an object mapping your existing model IDs
      1: { id: 1, ...},  // to their corresponding model objects
      2: { id: 2, ...},
      3: { id: 3, ...},
      ...
    }
  },
  ...,
  computed: {
    modelsArray() {
      return Object.values(this.models);
    },
    modalTitle() {
      return `${ this.mode } Model`;
    }
  },
  methods: {
    create() {
      this.mode = 'Create';
      this.dialogFormVisible = true;
    },
    edit(model) {
      this.mode = 'Edit';     
      this.formModel = _.cloneDeep(model); // See note below
      this.dialogFormVisible = true;
    },
    save() {
      // POST the new model (this.formModel) to your server using your ajax library of choice     
      // after the ajax call returns, do the following:
      this.models.push(the newly created model); // usually returned from the server as part of this ajax call
      this.reset();
    },
    update() {
      // PUT the new model (this.formModel) to your server using your ajax library of choice
      // After the ajax call returns, replace the updated model in the `models` object, and reset the form:
      this.models[this.formModel.id] = _.cloneDeep(this.formModel);
      this.reset();
    },
    reset() {
      this.dialogFormVisible = false;
      this.loading = false;
      this.formModel = {
        ... // put default form values here
      };
    }
  },
  mounted() {
    this.reset();
  }
}
</script

NOTE: _.cloneDeep is from lodash. If you're not using lodash, you can use one of these methods to clone the model.

如何在 vue.js 中创建用于创建和编辑功能的简单模式？

How to create a simple modal for create & edit functions in vue.js?

forms

laravel

vue.js

element-ui