未捕获的类型错误：尝试在 Vuejs 中调用 onchange() 方法时无法读取未定义的属性'apply'

Question

我正在使用Laravel Nova自定义工具创建我自己的模板。Nova使用vuejs，所以我试图在Tool.vue中添加我的自定义表单和js逻辑。

我运行这个非常简单的代码来对select执行onChange()事件，但我得到了以下错误：

Uncaught TypeError: Cannot read property 'apply' of undefined
at e (vendor.js?id=52886433f04b87b2c184:1)
at HTMLSelectElement.Yr.e._withTask.o._withTask (vendor.js?id=52886433f04b87b2c184:1)

这是我的表格：

<template>
<div>
<heading class="mb-6">Model Register Custom</heading>
<div>
<select v-model="selected" @change="onChange">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</div>
</div>
</template>

下面是我的js逻辑，它不是alert((，而是产生错误：

<script>
let Vue = require('vue');
export default {
mounted() {
var vm = new Vue({
methods: {
onChange() {
alert("dsds");
}
}
})
},
}
</script>

第页。S： 它可以很好地使用简单的javascript simple-onChange，但使用vuejs方法时，我总是会遇到这个奇怪的错误。

Answer 1

它的形状不对，你应该把它从挂载中扔掉。作为生命周期，挂载的它已经是一个函数，所以如果你想在屏幕的程序集中调用它，你可以在组件外声明方法，并在挂载的内部调用它。但在您的情况下，调用mounted中的函数是没有意义的，只有当您单击某个项目时才有意义。实例

<div id="app">
<heading class="mb-6">Model Register Custom</heading>
<div>
<select v-model="selected" @change="onChange">
<option value="A">A</option>
<option value="B">B</option>
<option value="C">C</option>
</select>
</div>
</div>
new Vue({
el: '#app',
methods: {
onChange() {
alert("dsds");
}
}
})

https://jsfiddle.net/hamiltongabriel/ke8w9czy/4/