Vue：Ajax加载内容后自定义组件无法渲染的解决方法

问题核心 #

初始加载的<comparison-training-toggle>组件能正常渲染，但Ajax动态加载的组件只会显示原始标签——因为Vue实例仅在初始化时编译一次DOM，不会自动处理后续新增的DOM元素；重复注册组件也无法触发重新编译。

解决方案（无需额外安装模块） #

1. 全局注册组件（仅执行一次）

把组件注册代码移到全局位置，避免重复注册：

// 全局注册组件，页面加载时执行一次即可
Vue.component('comparison-training-toggle', {
  template: Drupal.behaviors.vue__comparison_toggle.template,
  props: ['trainingId', 'icon', 'init-comparison'],
  data() {
    return {
      inComparison: false,
    }
  },
  computed: {
    toggleText() {
      return this.inComparison ? Drupal.t('Usuń z porównania') : Drupal.t('Dodaj do porównania')
    }
  },
  methods: {
    toggle() {
      // 保留你的toggle方法逻辑
    }
  },
  mounted() {
    // 根据init-comparison属性初始化状态
    this.inComparison = this.initComparison === '1';
  }
});

2. 利用Drupal Behaviors处理动态DOM

Drupal在Ajax加载完成后会自动调用behaviors的attach方法，并传入新加载的DOM作为context参数，我们只需要在这个范围内处理新组件：

Drupal.behaviors.vue__comparison_toggle = {
  attach: function(context, settings) {
    // 仅处理context内未初始化过的组件元素
    $(context).find('comparison-training-toggle').once('vue__comparison_toggle_init').each(function() {
      // 为每个新组件创建并挂载Vue实例
      new Vue({
        el: this
      });
    });
  }
};

为什么之前的代码无效？ #

• 重复调用Vue.component()不会触发Vue重新扫描DOM，全局组件只需注册一次。
• 直接在ajaxComplete里调用注册方法，没有针对新加载的DOM元素进行Vue实例挂载，所以组件标签不会被编译。

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