Turbo表单验证失败后Vue2组件无法渲染的问题求助

我使用@hotwired/turbo、Rails7和Vue2开发项目，整体运行正常，但遇到一个问题：当表单验证失败返回422状态码时，表单会重新渲染并显示错误信息，但所有Vue组件（如下方的<multiselect>）都无法渲染。在替换为Turbo之前，使用Turbolinks时该功能完全正常，且网站的常规导航可以正常加载Vue组件。

有问题的组件示例：

<multiselect>
  ...
  :multiple="true">
</multiselect>

核心JavaScript配置代码：

import Rails from "@rails/ujs"
import * as ActiveStorage from "@rails/activestorage"
import Turbo from "@hotwired/turbo-rails"

Rails.start()
ActiveStorage.start()

import 'bootstrap/dist/js/bootstrap';
    
import TurbolinksAdapter from 'vue-turbolinks'
import Vue from 'vue/dist/vue.esm'
// ... 其他导入

Vue.use(TurbolinksAdapter)

document.addEventListener('turbo:load', () => {

  axios.defaults.headers.common['X-CSRF-Token'] = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
  axios.defaults.headers.common['Content-Type'] = 'application/json';
  axios.defaults.headers.common['Accept'] = 'application/json';
    
  Vue.prototype.$csrfToken = document.getElementsByName('csrf-token')[0].content;
  Vue.prototype.$railsDirectUploadsUrl = document.documentElement.dataset.railsDirectUploadsUrl;

  const app = new Vue({
    el: '#vue-app',
    data: function() {
      return {
      }
    },
    methods: {
    },
    components: { 
      Multiselect
      // ... 其他组件
    }
  })
})

原因分析 #

Turbo处理422响应时，会用响应内容替换当前页面的<body>或指定<turbo-frame>，但此时**turbo:load事件不会触发**——该事件仅在初始页面加载或常规导航（如点击链接）时触发。你的Vue实例仅绑定在turbo:load上，因此表单验证失败后页面更新时，Vue未重新初始化，导致组件无法渲染。

解决步骤 #

1. 同时监听turbo:load和turbo:render事件
   Turbo在页面内容更新（包括表单失败后的页面替换）后会触发turbo:render事件，将Vue初始化逻辑封装为函数并绑定到这两个事件上，同时添加实例销毁逻辑避免重复挂载：

   import Rails from "@rails/ujs"
   import * as ActiveStorage from "@rails/activestorage"
   import Turbo from "@hotwired/turbo-rails"
   
   Rails.start()
   ActiveStorage.start()
   
   import 'bootstrap/dist/js/bootstrap';
    
   import Vue from 'vue/dist/vue.esm'
   // ... 其他导入
   
   // 移除TurbolinksAdapter相关代码
   // import TurbolinksAdapter from 'vue-turbolinks'
   // Vue.use(TurbolinksAdapter)
   
   function initVueApp() {
     // 销毁已存在的Vue实例，防止重复挂载
     const vueRoot = document.querySelector('#vue-app');
     if (vueRoot?._vueInstance) {
       vueRoot._vueInstance.$destroy();
     }
   
     axios.defaults.headers.common['X-CSRF-Token'] = document.querySelector('meta[name="csrf-token"]').getAttribute('content');
     axios.defaults.headers.common['Content-Type'] = 'application/json';
     axios.defaults.headers.common['Accept'] = 'application/json';
       
     Vue.prototype.$csrfToken = document.getElementsByName('csrf-token')[0].content;
     Vue.prototype.$railsDirectUploadsUrl = document.documentElement.dataset.railsDirectUploadsUrl;
   
     const app = new Vue({
       el: '#vue-app',
       data: function() {
         return {
         }
       },
       methods: {
       },
       components: { 
         Multiselect
         // ... 其他组件
       }
     })
   
     // 将实例挂载到根元素，方便后续销毁
     vueRoot._vueInstance = app;
   }
   
   // 绑定到两个事件
   document.addEventListener('turbo:load', initVueApp);
   document.addEventListener('turbo:render', initVueApp);
   

2. 移除TurbolinksAdapter依赖
   由于已切换到Turbo，原vue-turbolinks适配器不再适用，直接删除相关导入和注册代码。

3. 确保Rails响应结构正确
   在返回422的控制器动作中，确保渲染的模板包含#vue-app容器，且页面结构完整（或使用<turbo-frame>限定替换范围），保证Turbo能正确替换内容并让Vue找到挂载点。

验证效果 #

提交表单触发验证失败后，页面会正常显示错误信息，同时Vue组件（如multiselect）将正确渲染，常规导航功能不受影响。

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