vue-tiny-slider：未捕获（承诺中）类型错误：t2 不是函数

Question

我使用 Vue 3。我安装了 vue-tiny-slider https://github.com/viktorlarsson/vue-tiny-slider，但它向我显示错误“t2 不是函数”。该文档未涵盖 Vue 3 的设置，因此我尝试自行设置。

这是我的模板：

<template>
    <div class="my-slider">
        <vue-tiny-slider
            :mouse-drag="true"
            :loop="false"
            :items="2"
            :gutter="20">
            <div
                v-for="recipe in storeRecipe.popularRecipes"
                :key="recipe.recipe_id">
                <ItemCard :recipe="recipe" :pending="storeRecipe.pending" />
            </div>
        </vue-tiny-slider>
    </div>
</template>

脚本：

<script setup>
import ItemCard from '@/component/ItemCard.vue';
import { onMounted, h } from 'vue';
import { useStoreRecipe } from '@/store/storeRecipe';
const storeRecipe = useStoreRecipe();

import VueTinySlider from 'vue-tiny-slider';

const render = () => {
    return h(
        VueTinySlider,
        {},
        {
            default: () => (this.$slots.default ? this.$slots.default() : []),
        }
    );
};

onMounted(async () => {
    render();
    await storeRecipe.loadPopularRecipes();
});
</script>

我正在寻找可能的解决方案。

Answer 1

在新的 .js 文件中扩展 VueTinySlider，修改其中的

render

代码，然后将更新的滑块导入到您想要使用它的 SFC 中。

tinyslider.js

import { defineComponent, h } from 'vue'
import VueTinySlider from 'vue-tiny-slider'

export default defineComponent({
  extends: VueTinySlider,
  render() {
    return h('div', this.$slots?.default ? this.$slots.default() : {})
  }
})

组件.vue

<template>
  <div class="my-slider">
    <vue-tiny-slider :mouse-drag="true" :loop="false" :items="2" :gutter="20">
      <div v-for="recipe in storeRecipe.popularRecipes" :key="recipe.recipe_id">
        <ItemCard :recipe="recipe" :pending="storeRecipe.pending" />
      </div>
    </vue-tiny-slider>
  </div>
</template>

<script setup>
import VueTinySlider from './tinyslider.js'
import { onMounted } from 'vue';
import { useStoreRecipe } from '@/store/storeRecipe';
const storeRecipe = useStoreRecipe();

onMounted(async () => {
    await storeRecipe.loadPopularRecipes();
});
</script>