在Vue.js中重置Laravel Blade生成的服务端表单

针对你的场景，我有两种方案推荐，分别对应「不改动现有Blade渲染逻辑」和「逐步迁移到Vue响应式控制」的情况，同时也会聊聊混合场景下DOM库的使用建议：

方案一：直接通过Vue操作DOM（适配现有Blade表单） #

因为你的表单是由Blade渲染、带有服务端默认值，且没有用Vue的v-model绑定数据，那我们可以利用Vue的$refs来安全获取表单元素，然后通过原生DOM API清空所有字段，这样完全不会干扰服务端的默认值渲染。

代码示例： #

<!-- Blade渲染的原有表单，添加ref标识 -->
<div id="app">
  <form ref="targetForm">
    <input type="text" name="fullname" value="{{ $user->fullname }}">
    <input type="email" name="email" value="{{ $user->email }}">
    <textarea name="bio">{{ $user->bio }}</textarea>
    <input type="checkbox" name="newsletter" {{ $user->newsletter ? 'checked' : '' }}> 订阅通讯
    <select name="role">
      <option value="" disabled>选择角色</option>
      <option value="admin" {{ $user->role === 'admin' ? 'selected' : '' }}>管理员</option>
      <option value="user" {{ $user->role === 'user' ? 'selected' : '' }}>普通用户</option>
    </select>
    
    <!-- 自定义重置按钮，绑定Vue点击事件 -->
    <button type="button" @click="clearEntireForm">清空表单</button>
  </form>
</div>

new Vue({
  el: '#app',
  methods: {
    clearEntireForm() {
      const form = this.$refs.targetForm;
      // 遍历表单内所有可交互元素
      Array.from(form.elements).forEach(el => {
        switch (el.type) {
          // 处理文本类输入框
          case 'text':
          case 'email':
          case 'password':
          case 'number':
          case 'tel':
            el.value = '';
            break;
          // 处理复选框和单选框
          case 'checkbox':
          case 'radio':
            el.checked = false;
            break;
          // 处理下拉选择框（单选）
          case 'select-one':
            el.selectedIndex = -1; // 置为未选中状态
            break;
          // 处理多选下拉框
          case 'select-multiple':
            Array.from(el.options).forEach(opt => opt.selected = false);
            break;
          // 处理文本域
          default:
            if (el.tagName === 'TEXTAREA') {
              el.value = '';
            }
        }
      });
    }
  }
});

这里用$refs代替原生的document.querySelector，是因为$refs是Vue管理的DOM引用，会自动跟随组件的生命周期更新，比直接操作全局DOM更安全。

方案二：逐步迁移到Vue响应式控制（长期更优） #

如果之后你想让Vue接管更多表单逻辑（比如验证、提交），可以把Blade的默认值赋值给Vue的data属性，用v-model绑定表单元素，这样清空操作会更简洁，完全不需要接触DOM：

代码示例： #

<div id="app">
  <form>
    <input type="text" name="fullname" v-model="form.fullname">
    <input type="email" name="email" v-model="form.email">
    <textarea name="bio" v-model="form.bio"></textarea>
    <input type="checkbox" name="newsletter" v-model="form.newsletter"> 订阅通讯
    <select name="role" v-model="form.role">
      <option value="" disabled>选择角色</option>
      <option value="admin">管理员</option>
      <option value="user">普通用户</option>
    </select>
    
    <button type="button" @click="clearForm">清空表单</button>
  </form>
</div>

new Vue({
  el: '#app',
  data() {
    return {
      form: {
        fullname: '{{ $user->fullname }}',
        email: '{{ $user->email }}',
        bio: '{{ $user->bio }}',
        newsletter: {{ $user->newsletter ? 'true' : 'false' }},
        role: '{{ $user->role }}'
      }
    }
  },
  methods: {
    clearForm() {
      // 遍历表单对象的所有属性，置为空值
      Object.keys(this.form).forEach(key => {
        const type = typeof this.form[key];
        this.form[key] = type === 'boolean' ? false : '';
      });
    }
  }
});

这种方式更符合Vue的响应式设计理念，后续扩展表单功能会更顺畅，也避免了直接操作DOM的耦合性。

关于混合场景下DOM操作库的使用建议 #

如果只是偶尔需要做这类DOM操作（比如几个表单的重置），完全不需要额外引入jQuery或其他DOM库。原生DOM API配合Vue的$refs已经足够完成需求，而且现在浏览器对原生API的支持非常好，Array.from、forEach这些方法都是现代浏览器的标准特性。

但如果你的项目里有大量复杂的DOM交互需求（比如频繁的元素增删改、复杂的动画控制），可以考虑引入轻量的DOM库（比如Zepto，体积比jQuery小很多），但优先还是建议用Vue的响应式能力来解决问题，只有在Vue的方案无法满足时，再考虑直接操作DOM。

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