热模块更换:[Vue警告]:挂接的钩子中出现错误:“ TypeError:无法读取未定义的属性'onClik'”

时间:2019-03-02 03:24:56

标签: laravel vue.js webpack hot-module-replacement

  • npm v6.8.0
  • laravel 5.5
  • laravel.mix v4.0.14
  • webpack-dev-server v ^ 3.2.1

在热模块更换上运行(npm热运行)时,这是我在控制台中收到的消息
[HMR]等待来自WDS的更新信号...
[WDS]启用热模块更换。


当我进行一些更改时在lead-management.js上,这是我收到的消息

[WDS]应用已更新。重新编译...
[WDS]应用程序热更新...
[HMR]正在检查服务器上的更新...
[Vue警告]:挂接的钩子中出现错误:“ TypeError:无法读取未定义的属性'onClik'” (在Root中找到)
TypeError:无法读取未定义的属性“ onClik”
[Vue警告]:nextTick中的错误:“ TypeError:无法读取未定义的属性'onClik'”(位于Root中)
TypeError:无法读取未定义的属性“ onClik”
[HMR]更新了模块:
[HMR]-./resources/assets/js/lead-management.js
[HMR]应用程序是最新的。

然后我的按钮或任何功能不起作用
FYI onClick是组件DataTable中的一种方法

资源/资产/js/lead-management.js

import Croppa from 'vue-croppa';
import { Form, HasError, AlertError, AlertSuccess } from 'vform'
import CKEditor from '@ckeditor/ckeditor5-vue';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import datePicker from 'vue-bootstrap-datetimepicker'

import DataTable from './components/DataTable.vue';
import Fullcalendar from './components/Fullcalendar.vue';
import Button from './components/Button.vue';
import Select2 from './components/Select2.vue';
if (module.hot){
    module.hot.accept()
}

import 'pc-bootstrap4-datetimepicker/build/css/bootstrap-datetimepicker.css';
Vue.component('datatable-component', DataTable);
Vue.component('fullcalendar-component', Fullcalendar);
Vue.component('VButton', Button);
Vue.component('select2-component',Select2);
Vue.component('my-image-cropper', Croppa.component)
Vue.component(HasError.name, HasError)
Vue.component(AlertError.name, AlertError)
Vue.component(AlertSuccess.name, AlertSuccess)

mounted: function(){// mounted part 
    this.$nextTick(function () {
        /**i have this code that give me property 'onClik' of undefined while [HMR] Checking for updates on the server**/
        this.$refs.table.onClik('.show-activity', function() {})
    }
} 

lead-management.blade.php

<datatable-component class="responsive table table-striped table-bordered"
    ref="table">
</datatable-component>

我在Lead-management.blade.php中拥有资产

<link href="{{ mix('css/lead-management.css') }}" rel="stylesheet">
<script src="{{ mix('js/lead-management.js') }}" ></script>

webpack.mix.js

let mix = require('laravel-mix');

mix.js('resources/assets/js/lead-management', 'public/js')
	.sass('resources/assets/sass/lead-management.scss', 'public/css');

0 个答案:

没有答案