VueJS：在 v-for 之后触发 jQuery？

Posted 2023-02-19

【中文标题】VueJS：在 v-for 之后触发 jQuery？

【英文标题】：VueJS: Fire jQuery after v-for?

【发布时间】：2017-10-09 12:56:41

【问题描述】：

我正在使用 v-for 渲染一个功能列表，它使用 Foundation 的手风琴菜单 jQuery 在无序列表中嵌套下拉菜单...但无法弄清楚如何创建手风琴，因为 v-for在我的 mount() 函数之后呈现...这是我的代码：

<template>
    <div class="off-canvas position-left" id="filters" data-off-canvas>

    <!-- Close button -->
        <button class="close-button" aria-label="Close menu" type="button" data-close>
            <span aria-hidden="true">&times;</span>
        </button>

    <!-- Menu -->
        <h3>Choose a Filter</h3>
        <ul class="vertical menu" data-accordion-menu>

            <li v-for="category in categories" :key="category.id">
                <a href="#"> category.name </a>
                <ul class="menu vertical nested">
                    <li v-for="feature in category.features" :key="feature.id">
                        <a href="#"> feature.name </a>
                    </li>
                </ul>
            </li>

        </ul>

    </div>
</template>

<script>
    export default 
        props: ['categories'],
        mounted() 
            this.loadFoundation()
        ,
        unmounted() 
            $(this.$el).foundation.destroy();
        
    
</script>

我尝试使用 $nextTick 功能，都在 mount() 钩子中，如下所示：

mounted() 
    this.$nextTick(function() 
      $(this.$el).foundation();
    )

或者作为它自己的方法，像这样：

methods: 
  loadFoundation() 
    this.$nextTick(function() 
      $(this.$el).foundation();
    )
  
,
mounted() 
  this.loadFoundation()

但两者都不能正常工作（它初始化了我的画布外菜单，但不是 v-for 中的手风琴菜单）。我需要使用监视功能吗？我觉得必须有一种更简单的方法来做到这一点，但是将 jQuery 与 Vue 集成真的让我想在这一点上扯掉我的头发：D

任何帮助将不胜感激！

【问题讨论】：

我不确定您要达到什么目的，但听起来您可能想使用除mounted() 之外的其他挂钩。检查vuejs.org/v2/guide/instance.html#Lifecycle-Diagram 的生命周期图是否对您有帮助。

updated() 是您正在寻找的。 vuejs.org/v2/api/#updated

另外，如果你打算在你的项目中使用很多 jquery 插件，我强烈建议将它们设置为自定义 Vue 指令。然后可以在指令级别解决此类问题，从而提高可重用性。 gambardella.info/2016/09/05/…

【参考方案1】：

您可以在 categories 道具上使用手表并在更改时触发它：

export default 
  props: ['categories'],
  watch: 
    'categories': function (val, oldVal) 
      $(this.$el).foundation();
    
  
)