Vue.js 2.0中v-for渲染完成后触发第三方脚本的方案咨询

针对你遇到的b-tabs标签页2中v-for渲染异步数据后，需要准确触发Altmetric徽章初始化脚本的问题，可以通过以下步骤解决：

核心思路 #

利用Vue的$nextTick方法确保DOM渲染完成后执行第三方函数，同时结合b-tabs的切换事件，仅在目标标签页激活且数据就绪时触发，避免无效调用和时序问题。

具体实现步骤 #

1. 监听标签页切换事件 #

在b-tabs组件上绑定change事件，监听标签页切换动作：

<b-tabs @change="handleTabChange" ref="tabs">
  <b-tab title="标签页1" id="tab1">
    <!-- 标签页1内容，包含触发数据请求的操作 -->
  </b-tab>
  <b-tab title="标签页2" id="tab2">
    <div class="person-info" v-for="obj in publicationData" :key="obj.pmid" :data-pmid="obj.pmid">
      <div>
        <div class='altmetric-embed' 
             data-badge-type='donut' 
             :data-pmid="obj.pmid" 
             data-link-target='_blank' 
             data-badge-popover='bottom'>
        </div>
      </div>
    </div>
  </b-tab>
</b-tabs>

2. 处理数据请求与徽章初始化 #

在数据请求完成后，判断当前是否处于标签页2，若是则通过$nextTick触发徽章初始化；同时在标签页切换到目标页时，若数据已加载也执行初始化：

export default {
  data() {
    return {
      publicationData: [],
      new_researchers: []
    };
  },
  methods: {
    fetchPublicationData() {
      const self = this;
      axios.get(`https://wwwwwwwww.azurewebsites.net/api/formattedpubs/${self.new_researchers[0].PMIDS}`)
        .then(res => {
          self.publicationData = res.data.New_Publications;
          // 若当前已在标签页2，DOM更新后初始化徽章
          if (this.$refs.tabs.activeId === 'tab2') {
            this.$nextTick(() => {
              window._altmetric_embed_init?.();
            });
          }
        });
    },
    handleTabChange(tabId) {
      // 切换到标签页2且数据已加载时，初始化徽章
      if (tabId === 'tab2' && this.publicationData.length > 0) {
        this.$nextTick(() => {
          window._altmetric_embed_init?.();
        });
      }
    }
  }
};

关键说明 #

• $nextTick：Vue会在DOM更新完成后执行该方法的回调，确保v-for渲染的所有元素已挂载到DOM中，此时调用第三方脚本才能正确识别新添加的徽章容器。
• 标签页切换监听：避免在页面初始化或其他标签页加载时无效调用脚本，仅在用户切换到目标页且数据就绪时触发。
• 避免无限循环：之前使用$forceUpdate导致循环是因为在渲染函数相关逻辑中触发了更新，此方案完全避开了这种错误用法。

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