未捕获的TypeError：尝试在Vuejs中调用onchange（）方法时，无法读取未定义的属性“apply”

Posted 2021-04-30

我正在使用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>

P.S：用简单的javascript简单onChange工作正常，但是用vuejs方法我总是得到这个奇怪的错误。

答案

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

<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/