Vue：单击按钮重置选定的表单答案

【问题标题】：Vue: Reset the selected form on a click of a buttonVue：单击按钮重置选定的表单
【发布时间】：2021-08-24 08:57:27
【问题描述】：

<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 按钮后重置将在模式中看到的表单。

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

创建这样的函数

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

在函数开头添加

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

我可能误解了问题，请更新问题并告诉我，我会再试一次。

【讨论】：