Это распространенная проблема. Конечно, многие из этих вещей сводятся к личным предпочтениям или мнению, но вот несколько вещей, которые следует учитывать:
Обычно при решении этой проблемы вы отображаете все свои существующие моделикаким-то образом (то есть списком), с кнопкой «редактировать». Когда я делаю это, я использую объект, который сопоставляет идентификаторы модели с соответствующими им объектами модели в качестве базовой модели данных для этого списка. Это позволяет легко заменить модель на обновленную версию (models[model.id] = model).
Привязка модели к форме напрямую (например: модель = "модель, которую вы хотите редактировать") обычно плохая реализация. Это связано с тем, что любые изменения, сделанные во время редактирования, будут немедленно записаны в модель. Проблема в том, что если ваша функция save() не работает, вам нужно все вернуть обратно. Лучшая реализация - клонировать модель и связать , который объект с формой.
Вы можете использовать вычисленное свойство для модальныхназвание / заголовок. У меня обычно есть свойство данных с именем mode, которое будет либо «Создать», либо «Редактировать», а затем у меня есть вычисляемое свойство, которое возвращает mode + ' Model', где «Модель» - это имя модели - в вашем случае, "Pregunta".
Поскольку функции create и update обычно используют разные конечные точки API (и методы HTTP), ваша кнопка "Сохранить / Обновить" должна вызватьправильный. Опять же, я использую свойство 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
ПРИМЕЧАНИЕ: _.cloneDeep от Лодаша. Если вы не используете lodash, вы можете использовать один из этих методов для клонирования модели.