在热模块更换上运行(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');