Vue.js数据保存成功后清空模态框表单问题求助

我懂你遇到的麻烦——试了reset()和直接赋值空字符串都没法清空模态框里的输入内容，核心问题出在Vue是数据驱动的框架，得从绑定的数据源入手，而不是直接操作DOM或者错误修改数据结构。

为什么之前的方法没用？ #

• reset()是原生DOM的表单重置方法，它只会把表单元素恢复到页面加载时的初始值，但不会同步更新Vue里的verse数据。等你下次打开模态框，Vue会用旧的verse数据重新渲染输入框，所以看起来压根没清空。
• 如果之前尝试的myData = ''是把整个verse对象改成了字符串，那这会直接破坏v-model绑定的属性结构，自然也没法正常清空输入框。

可行的解决方案 #

最直接有效的方式，就是在保存成功后把verse对象重置回初始状态，利用Vue的双向绑定自动更新输入框内容。

方法1：直接重置对象属性

在axios的then回调里，给verse重新赋值一个干净的初始对象：

function(e) {
 axios.post('/api/saveVerse', this.verse)
 .then(res => {
 this.isLoading = false
 // 关键步骤：重置verse为初始空状态
 this.verse = {
   number: '',
   heading: '',
   body: '',
   book_id: '',
   chapter_id: '',
 }
 $('#exampleModal').modal('toggle');
 this.getVerses.push( res.data.verse );
 })
 .catch(error => {
 this.errors = error.response.data.errors
 this.isLoading = false
 })
}

方法2：复用初始模板（更优雅）

如果以后可能修改表单字段，建议在data里提前定义一个初始状态模板，这样重置时直接复用即可：

data() {
  // 定义初始状态模板
  const initialVerse = {
    number: '',
    heading: '',
    body: '',
    book_id: '',
    chapter_id: '',
  };
  return {
    //...
    verse: {...initialVerse}, // 用扩展运算符复制初始状态
    initialVerse
  }
}

然后在submit方法的then回调里：

this.verse = {...this.initialVerse}; // 快速重置为初始空状态

额外小提醒 #

• 尽量别直接操作DOM（比如用reset()），Vue的设计理念是数据驱动视图，操作DOM会让数据和视图脱节，容易引发奇怪的bug。
• 重置操作建议放在关闭模态框之前，这样下次打开模态框时，输入框就是干净的空状态了。

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