Vue:单击按钮时重置所选表单

Question

<b-row class="mb-3">
<b-col>
<div class="float-right">
<b-form-select
v-model="selected"
:options="options"
></b-form-select>
</div>
</b-col>
<b-col>
<b-button
id="show-btn"
variant="dark"
class="text-white"
:disabled="!this.selected"
@click="showModal"
>Add Data</b-button
>
</b-col>
</b-row>

我有一个选择字段和一个按钮来添加不同类型的数据，如图像，块，段落如下:

options: [
{ value: null, text: "Please select an option" },
{ value: "image", text: "Image" },
{ value: "block", text: "Block" },
{ value: "paragraph", text: "Paragraph" },
{ value: "link", text: "Link" },
],

所有的表单都将在一个模态中打开，所以在模态中我应用了这样的条件:

<div v-if="selected === 'image'">
<image></image>
</div>
<div v-if="selected === 'paragraph'">
<paragraph></paragraph>
</div>
<div v-if="selected === 'block'">
<block></block>
</div>

不同的类型有不同的字段，如下所示:

image_form: {
text: {
en: "",
np: "",
},
caption: {
en: "",
np: "",
},
image: "",
type: "",
},
paragraph_form: {
description: {
en: "",
np: "",
},
images: [],
},

如果用户想添加图像，他/她将看到图像表单在模态中，如果他们想添加段落，将得到段落模态，它适用于所有。由于我使用相同的表单来添加和编辑表单，所以如果我在添加之前单击编辑，它就是数据字段。因此，如果用户从下拉菜单中选择图像，我想在单击ShowModal按钮时重置图像表单，这也适用于所有。我该怎么做呢?简而言之，我想重置的形式，将在点击ShowModal按钮后看到的模态

Answer 1

创建如下函数

clearForm() {
this.image_form.text.en = "";
this.image_form.text.np = "";
this.image_form.caption.en = "";
// etc.
}

在函数开头添加

showModal() {
this.clearForm();
// your code ...
}

我可能误解了问题，请更新问题并让我知道，我会再试一次。