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

Question

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

我运行这个非常简单的代码来在选择上执行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 simple onChange，但使用 vuejs 方法时，我总是会收到这个奇怪的错误。

Answer 1

它的形状不对，你应该把它扔掉。作为生命的循环，mounted它已经是一个函数，所以如果你想在屏幕的组装中调用它，你在组件外面声明方法，在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/