Quasar 2：在使用 <script setup> 定义的 SFC 中使用 v-ripple 指令答案

【问题标题】：Quasar 2: Using v-ripple directive in SFC defined with <script setup>Quasar 2：在使用 <script setup> 定义的 SFC 中使用 v-ripple 指令
【发布时间】：2022-06-11 17:05:14
【问题描述】：

我正在尝试 Quasar v2.7.1 框架（使用 Vue 3、TypeScript、Pania 和路由器）并希望使用语法来定义 SFC，它是如何在官方 Vue 3 文档中推荐的。但是，一旦我在其中的任何元素上使用 v-ripple 指令更改组件，我就会遇到以下错误：

TypeError：无法读取未定义的属性（读取“配置”）在 updateModifiers (Ripple.js?v=eddf1594:65:45) 在 beforeMount (Ripple.js?v=eddf1594:112:9) 在 callWithErrorHandling (runtime-core.esm-bundler.js:155:22) 在 callWithAsyncErrorHandling (runtime-core.esm-bundler.js:164:21) 在 invokeDirectiveHook (runtime-core.esm-bundler.js:2791:13) 在 mountElement (runtime-core.esm-bundler.js:5180:13) 在 processElement (runtime-core.esm-bundler.js:5110:13) 在补丁 (runtime-core.esm-bundler.js:5030:21) 在 ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5582:21) 在 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 指令。或者这是一个错误？

【问题讨论】：

我cannot reproduce.
这很奇怪。我尝试了很多次，对我来说它很容易重现。也许这取决于环境？我使用 Win10 和 yarn 作为包管理器。也是 Node.js 的最后一个 LTS 版本
我看了你的测试项目。我的类星体项目看起来有点不同。我在 CMD 中使用“yarn create quasar”命令来搭建一个项目。我准备了一个 git repo 来测试github.com/LevShipulin/quasar-test
如quasar#13154 中所述，一种解决方法是降级到vue@3.2.31。 demo（注意 Quasar 在 StackBlitz 上看起来很不稳定，所以演示可能无法运行，但这不是由 vue 降级引起的）

标签： typescript vuejs3 quasar

【解决方案1】：

我也遇到了这个问题，正如@tony19 建议的那样，刚刚降级到 vue@3.2.31 并且它可以工作。

【讨论】：