[Vue warn]: Property or method “throttle“ is not defined on the instance but referenced during rende

tech2023-02-24  98

在开发的过程中,用到了节流,引入公共的节流,初始调用如下(报错了…)。 template中:

<button class="btn" @click="throttle(Submit(),500,2)" :disabled="!normalUse">创建</button>

JS文件只是引入:

import {throttle} from '../../../../utils/index'

以上代码,执行后的结果:

vconsole.min.js?aac1:10 [Vue warn]: Property or method "throttle" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties. found in ---> <Index> at src/views/mobile/conference/create/index.vue <Index> at src/views/mobile/home/index.vue <App> at src/App.vue <Root> value @ vconsole.min.js?aac1:10 value @ vconsole.min.js?aac1:10 window.console.<computed> @ vconsole.min.js?aac1:10 value @ vconsole.min.js?aac1:10 value @ vconsole.min.js?aac1:10 window.console.<computed> @ vconsole.min.js?aac1:10 warn @ vue.runtime.esm.js?a593:619 warnNonPresent @ vue.runtime.esm.js?a593:2015 get @ vue.runtime.esm.js?a593:2070 click @ index.vue?508f:345 invokeWithErrorHandling @ vue.runtime.esm.js?a593:1854 invoker @ vue.runtime.esm.js?a593:2179 original._wrapper @ vue.runtime.esm.js?a593:6917 vconsole.min.js?aac1:10 [Vue warn]: Error in v-on handler: "TypeError: _vm.throttle is not a function" found in ---> <Index> at src/views/mobile/conference/create/index.vue <Index> at src/views/mobile/home/index.vue <App> at src/App.vue <Root> value @ vconsole.min.js?aac1:10 value @ vconsole.min.js?aac1:10 window.console.<computed> @ vconsole.min.js?aac1:10 value @ vconsole.min.js?aac1:10 value @ vconsole.min.js?aac1:10 window.console.<computed> @ vconsole.min.js?aac1:10 warn @ vue.runtime.esm.js?a593:619 logError @ vue.runtime.esm.js?a593:1884 globalHandleError @ vue.runtime.esm.js?a593:1879 handleError @ vue.runtime.esm.js?a593:1839 invokeWithErrorHandling @ vue.runtime.esm.js?a593:1862 invoker @ vue.runtime.esm.js?a593:2179 original._wrapper @ vue.runtime.esm.js?a593:6917 vconsole.min.js?aac1:10 TypeError: _vm.throttle is not a function at click (eval at ./node_modules/_cache-loader@4.1.0@cache-loader/dist/cjs.js?{"cacheDirectory":"node_modules/.cache/vue-loader","cacheIdentifier":"e66113e6-vue-loader-template"}!./node_modules/_vue-loader@15.9.3@vue-loader/lib/loaders/templateLoader.js?!./node_modules/_cache-loader@4.1.0@cache-loader/dist/cjs.js?!./node_modules/_vue-loader@15.9.3@vue-loader/lib/index.js?!./src/views/mobile/conference/create/index.vue?vue&type=template&id=433df7bf&scoped=true& (7.js:155), <anonymous>:348:45) at invokeWithErrorHandling (vue.runtime.esm.js?a593:1854) at HTMLButtonElement.invoker (vue.runtime.esm.js?a593:2179) at HTMLButtonElement.original._wrapper (vue.runtime.esm.js?a593:6917)

虽然执行了,但是报错了!!!

解决方法如下: 写法错误,不能写在template中,要写在js代码块中,所以改动了下: template:

<button class="btn" @click="toCreate" :disabled="!normalUse">创建</button>

js 代码:

import {throttle} from '../../../../utils/index'; //引入节流 toCreate(){ throttle(this.Submit(),400,2); },

这样就可以了,完成

最新回复(0)