Vue中点击打开模态框按钮时重置对应选中类型的表单如何实现

步骤1：提取各类型表单的初始默认配置 #

先将所有表单的初始干净值抽为常量，不要放在data中，避免被业务逻辑修改后导致重置基准错误：

// 组件顶层定义，不会被响应式修改
const INITIAL_FORMS = {
  image: {
    text: {
      en: "",
      np: "",
    },
    caption: {
      en: "",
      np: "",
    },
    image: "",
    type: "",
  },
  paragraph: {
    description: {
      en: "",
      np: "",
    },
    images: [],
  },
  block: {
    // 补充block类型对应的初始字段
  },
  link: {
    // 补充link类型对应的初始字段
  }
}

data中声明的表单从初始常量取值即可：

data() {
  return {
    selected: null,
    options: [/* 原有下拉选项配置 */],
    image_form: {...INITIAL_FORMS.image},
    paragraph_form: {...INITIAL_FORMS.paragraph},
    block_form: {...INITIAL_FORMS.block},
    link_form: {...INITIAL_FORMS.link},
    // 其他原有data字段
  }
}

步骤2：给showModal方法加入表单重置逻辑 #

在打开模态框前，根据当前选中的类型，把对应表单重置为初始值：

methods: {
  showModal() {
    // 重置对应表单
    const targetFormKey = `${this.selected}_form`
    if (INITIAL_FORMS[this.selected] && this[targetFormKey]) {
      // Object.assign可以保证Vue2/Vue3的响应式正常触发
      this[targetFormKey] = Object.assign({}, INITIAL_FORMS[this.selected])
    }
    // 原有打开模态框的逻辑，比如控制模态框显示的变量赋值
    // this.modalVisible = true
  }
}

如果需要兼容非常旧的Vue版本，也可以用switch写法，逻辑完全等价：

showModal() {
  switch(this.selected) {
    case 'image':
      this.image_form = Object.assign({}, INITIAL_FORMS.image)
      break
    case 'paragraph':
      this.paragraph_form = Object.assign({}, INITIAL_FORMS.paragraph)
      break
    case 'block':
      this.block_form = Object.assign({}, INITIAL_FORMS.block)
      break
    case 'link':
      this.link_form = Object.assign({}, INITIAL_FORMS.link)
      break
  }
  // 原有打开模态框逻辑
}

可选优化：简化模态框内的条件渲染 #

不用写多个v-if判断，用Vue动态组件可以大幅简化代码，后续新增类型也不需要修改模板：

<!-- 替换原有多个v-if的div -->
<component :is="selected" v-if="selected"></component>

内容的提问来源于stack exchange，提问作者Gaurav