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的实例我在别处宣布了这一点。然而，我得到这个错误：我试过的第二种方法是直接从视图通过事件处理函数调用一个函数。我来自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某处解释，但我可能是错的。 :)