更新到 Vue 2.6 和 PrimeVue 2.4 - 无法读取未定义的属性“波纹”

Question

将 primevue 更新到 2.4.x 后，使用 Serenity 模板，我在仪表板上遇到了 200 多个控制台错误：

[Vue warn]: Error in directive ripple inserted hook: "TypeError: Cannot read property 'ripple' of undefined"    
found in    
---> <AppSubmenu> at src/AppSubmenu.vue
       <AppMenu> at src/AppMenu.vue
         <App> at src/App.vue
           <AppContainer> at src/AppContainer.vue
             <Root>

当然，如果我从 AppSubmenu 中删除该指令，问题将会出现在 Button、DataTables、Panels 等处。

我多次遇到的另一个错误：

TypeError: Cannot read property 'ripple' of undefined
    at inserted (Ripple.js?15f1:79)
    at callHook$1 (vue.runtime.esm.js?2b0e:6680)
    at callInsert (vue.runtime.esm.js?2b0e:6619)
    at wrappedHook (vue.runtime.esm.js?2b0e:2235)
    at invokeWithErrorHandling (vue.runtime.esm.js?2b0e:1854)
    at Object.invoker [as insert] (vue.runtime.esm.js?2b0e:2175)
    at invokeInsertHook (vue.runtime.esm.js?2b0e:6346)
    at VueComponent.patch [as __patch__] (vue.runtime.esm.js?2b0e:6565)
    at VueComponent.Vue._update (vue.runtime.esm.js?2b0e:3948)
    at VueComponent.updateComponent (vue.runtime.esm.js?2b0e:4066)

我怎样才能摆脱它？

提前非常感谢！

Answer 1

要解决涟漪效应问题，您需要声明涟漪指令。具体方法如下：

在您的 VUE main.js 文件中：

import Ripple from 'primevue/ripple';

import App from './App.vue'
import router from './router'

const app = createApp(App)
app.directive('ripple', Ripple);