Uncaught TypeError: Невозможно прочитать свойство 'apply' undefined при попытке вызвать метод onchange () в Vuejs - PullRequest
Новая
       29

Uncaught TypeError: Невозможно прочитать свойство 'apply' undefined при попытке вызвать метод onchange () в Vuejs

0 голосов
/ 05 ноября 2018

Я использую 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>

P.S .: Он отлично работает с простым javascript, простым onChange, но при подходе vuejs я всегда получаю эту странную ошибку.

1 Ответ

0 голосов
/ 05 ноября 2018

Это неправильная форма, вы должны выбросить его из смонтированного. Как цикл жизни, смонтированный это уже функция, поэтому, если вы хотите вызвать его в сборке экрана, вы объявляете метод вне компонента и вызываете его внутри смонтированного. Но в вашем случае не имеет смысла вызывать функцию в смонтированном виде, и да, только когда вы нажимаете на элемент. Пример. 

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

...