2

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

我运行这个非常简单的代码在选择上执行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>

PS：它适用于简单的javascript simple onChange，但使用vuejs方法我总是得到这个奇怪的错误。

4

1 回答 1

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/

于 2018-11-05T11:45:51.640 回答