VueJS：在v-for之后启动jQuery？

我正在用v-for呈现一个功能列表，它使用Foundation的accordion菜单jQuery在无序列表中嵌套一个下拉列表。。。但我不知道如何创建手风琴，因为v-for是在我的mounted（）函数之后渲染的。。。这是我的密码：

<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>

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

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

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

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

---

任何帮助都将不胜感激

您可以在

类别

道具上使用手表，并在更改时启动：

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

---

我不确定您想要实现什么，但听起来您可能想使用另一个钩子，而不是

mounted（）

。检查生命周期图是否对您有帮助。您正在寻找的是updated（）。此外，如果您计划在项目中使用大量jquery插件，我完全建议将它们设置为自定义Vue指令。这样的问题可以在指令级解决，从而提高可重用性。