Question

我正在使用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>

我已尝试在mount（）钩子中使用$ nextTick功能，如下所示：

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

或者像它自己的方法一样：

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

但两种方法都不正常（它初始化我的非画布菜单，但不是v-for中的手风琴菜单）。我需要使用手表功能吗？我觉得必须有一个更简单的方法来实现这一点，但是将jQuery与Vue集成在一起真的让我想要在这一点上撕掉我的头发：D

非常感谢任何帮助！

Answer 1

您可以在export default { props: ['categories'], watch: { 'categories': function (val, oldVal) { $(this.$el).foundation(); } } })道具上使用手表并在更改时触发：

<style name="CalenderViewCustom" parent="Theme.AppCompat">
    <item name="colorAccent">@color/white_30</item>
</style>

<style name="CalenderViewDateCustomText" parent="android:TextAppearance.DeviceDefault.Small">
    <item name="android:textColor">@color/white</item>
</style>

<style name="CalenderViewWeekCustomText" parent="android:TextAppearance.DeviceDefault.Small">
    <item name="android:textColor">@color/white_30</item>
</style>

VueJS：v-for后点火jQuery？

1 个答案: