Laravel 10+Vue 3项目无法保存标签名称的问题求助

我用Laravel 10和Vue 3开发项目，尝试将标签名称保存到数据库时，浏览器控制台弹出Vue未处理事件处理器错误，以下是现有代码和具体修复步骤：

现有代码 #

AdminController.php #

public function addTag(Request $request){
    return Tag::create([
        'tagName' => $request->tagName
    ]);
}

web.php 路由配置 #

Route::post('app/create_tag', [AdminController::class, 'addTag']);

tags.vue 组件代码 #

<Modal v-model="addModal" title="Add Tag" :mask-closable="false" :closable="false">
    <Input v-model="data.tagName" placeholder="Add Tag Name" style="width: 300px" />

    <div slot="footer">
        <Button type="default" @click="addModal=false">Close</Button>
        <Button type="primary" @click="addTag" :disabled="isAdding" :loading="isAdding">{{ isAdding ? 'Adding..' : 'Add tag' }}</Button>
    </div>
</Modal>

<script>
methods : {
    async addTag(){
        if(this.data.tagName.trim()=='') return this.e('Tag name is required')
        const res = await this.callApi('post', 'app/create_tag', this.data)
        if(res.status===200){
            
            this.tags.unshift(res.data)
            this.s('Tag has been added sucessfully!')
            this.addModal = false
            this.data.tagName = ''
        } else {
            this.swr()
        }
    }
},
</script>

common.js 公共方法 #

export default {
    data(){
        return {

        }
    },

    methods:{
         async callApi(method, url, dataObj ){
            try {
              return await axios({
                    method: method,
                    url: url,
                    data: dataObj
                });
            } catch (e) {
                
                return e.response
            }
        }
}

控制台错误提示 #

[Vue warn]: Unhandled error during execution of component event handler 
  at <Button type="primary" onClick=fn<bound addTag> disabled=false  ... > 
  at <BaseTransition onAfterLeave=fn<bound animationFinish> appear=false persisted=false  ... > 
  at <Transition name="ease" onAfterLeave=fn<bound animationFinish> > 
  at <Modal modelValue=true onUpdate:modelValue=fn title="Add Tag"  ... > 
  at <Tags onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< 

修复步骤 #

1. 补上Laravel的CSRF令牌验证 #

Laravel默认会拦截无CSRF令牌的POST请求，这是最常见的触发原因：

• 先确认页面头部已引入CSRF meta标签（通常在Blade布局文件中）：

  <meta name="csrf-token" content="{{ csrf_token() }}">
  

• 在common.js的callApi方法中给axios请求添加CSRF请求头：

  async callApi(method, url, dataObj ){
      try {
          return await axios({
              method: method,
              url: url,
              data: dataObj,
              headers: {
                  'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
              }
          });
      } catch (e) {
          return e.response
      }
  }
  

2. 确保Vue组件方法存在且可访问 #

代码中调用的this.e()、this.s()、this.swr()如果未定义或未正确混入，会直接抛出错误：

• 若这些方法来自common.js，确保组件已正确混入该公共文件：

  <script>
  import common from './common.js'
  export default {
      mixins: [common],
      // 其他组件代码...
  }
  </script>
  

• 或者在addTag方法中添加安全调用判断，避免调用不存在的方法：

  async addTag(){
      try {
          if(this.data.tagName.trim() === '') {
              this.e?.('Tag name is required');
              return;
          }
          const res = await this.callApi('post', 'app/create_tag', this.data)
          if(res?.status === 200){
              this.tags.unshift(res.data)
              this.s?.('Tag has been added sucessfully!');
              this.addModal = false
              this.data.tagName = ''
          } else {
              this.swr?.();
          }
      } catch (err) {
          console.error('添加标签失败:', err);
          this.e?.('添加标签失败，请稍后重试');
      }
  }
  

3. 给Tag模型设置可填充字段 #

Laravel模型默认禁止批量赋值，若未设置$fillable，Tag::create()会抛出服务器异常：

• 在app/Models/Tag.php中添加允许批量赋值的字段：

  class Tag extends Model
  {
      use HasFactory;
  
      protected $fillable = ['tagName']; // 允许批量赋值的字段
  }
  

4. 查看请求详情定位问题 #

打开浏览器开发者工具的Network标签，查看app/create_tag请求的响应状态码：

• 403：优先排查CSRF令牌问题
• 500：检查服务器端错误（如模型配置、数据库连接）
• 422：可在Controller中添加请求验证规则

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