typescript - 类星体 2 : Using v-ripple directive in SFC defined with <script setup>

Question

我正在尝试 Quasar v2.7.1 框架(使用 Vue 3、TypeScript、Pinia 和 Router)，并希望使用语法来定义 SFC，这是如何在官方 Vue 3 文档中推荐的。但是一旦我在其中的任何元素上使用 v-ripple 指令更改组件，我就会面临以下错误:

TypeError: Cannot read properties of undefined (reading 'config')at updateModifiers (Ripple.js?v=eddf1594:65:45)at beforeMount (Ripple.js?v=eddf1594:112:9)at callWithErrorHandling (runtime-core.esm-bundler.js:155:22)at callWithAsyncErrorHandling (runtime-core.esm-bundler.js:164:21)at invokeDirectiveHook (runtime-core.esm-bundler.js:2791:13)at mountElement (runtime-core.esm-bundler.js:5180:13)at processElement (runtime-core.esm-bundler.js:5110:13)at patch (runtime-core.esm-bundler.js:5030:21)at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5582:21)at ReactiveEffect.run (reactivity.esm-bundler.js:185:25)

如果移除 v-ripple 指令 - 问题不会再次出现。

要重现，只需将默认 Quasar 样板的 EssentialLink.vue 组件更改为

    <template>
     <q-item clickable tag="a" target="_blank" v-ripple>
        <q-item-section v-if="icon" avatar>
          <q-icon :name="props.icon" />
        </q-item-section>
    
        <q-item-section>
          <q-item-label>{{ title }}</q-item-label>
          <q-item-label caption>{{ caption }}</q-item-label>
        </q-item-section>
      </q-item>
    </template>
    
    <script setup lang="ts">
    const props = defineProps<{
      title: string;
      caption: string;
      link: string;
      icon: string;
    }>();
    </script>

问题是:这是我的错吗，我必须以其他方式声明 v-ripple 指令。或者这是一个错误？

Answer 1

我也遇到了这个问题，正如@tony19 建议的那样，只需降级到 vue@3.2.31 就可以了。