Binding Input in Vue не работает

Question

Я хотел бы вызвать функцию со значением, когда пользователь начинает вводить в поле ввода. Я пробовал два подхода.

Первый подход заключается в использовании двухсторонней привязки к модели. Однако после выполнения документации я получаю сообщение об ошибке.

Вот пример из официальных документов:

<div id="app-6"> 
    <p>{{ message }}</p> 
    <input v-model="message"> 
</div> 


var app6 = new Vue({ 
    el: '#app-6', 
    data: { 
    message: 'Hello Vue!' 
    } 
}) 

И вот мой пример:

<template lang="html"> 
    <input 
    type="text" 
    v-model="handle" 
    /> 
</template> 


<script>  
    export default { 
    data: { 
     handle: 'model', 
    } 
    }; 
</script> 

Я пишу это как часть приложения, так что я решил не воссоздать экземпляр Vue и я объявил это в другом месте. Тем не менее, я получаю эту ошибку:

Property or method "handle" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

Второй подход, который я попробовал это это вызов функции непосредственно в окне с помощью обработчика событий. Я исхожу из React, так что это мой предпочтительный подход. Однако функция не определена как входное значение, означающее, что она не подбирает значение ввода.

<template lang="html"> 
    <input 
    type="text" 
    v-on:keyup="handleInput()" 
    /> 
</template> 

<script> 
    export default { 
    methods: { 
     handleInput(input) { 
     // input -> undefined 
     }, 
    }, 
    }; 
</script> 

Я действительно не понимаю, почему ни одна из этих работ не работает. Не будет ли ожидаемое поведение входного слушателя состоять в том, чтобы передать значение?

Куда я иду не так?

Похоже, вам, возможно, придется сделать что-то вроде этого: How to fire an event when v-model changes ? (vue js). Я не понимаю, почему вам нужно вручную привязать наблюдателя, когда вы назначили v-модель? Разве это не то, что должна делать V-модель?

Что, наконец, работал был такой:

<template lang="html"> 
    <input 
    type="text" 
    v-model="searchTerm" 
    @keyup.enter="handleInput" 
    /> 
</template> 


<script> 
    export default { 
    data() { 
     return { searchTerm: '' } 
    }, 
    methods: { 
     handleInput(event) {/* handle input */}, 
    }, 
    }; 
</script> 

Answer 1

не должны data функция на первом примере? Я думаю, что так оно и работает для компонентов vue.

<script>  
    export default { 
    data: function() { 
     return { handle: 'model' } 
    } 
    }; 
</script> 

Я думаю, что это было объяснено где-то на vuecasts.com, но я могу ошибаться. :)