我想在用户开始输入输入框时调用带有值的函数。我尝试了两种方法。
第一种方法是尝试使用双向绑定到模型。但是，在遵循文档后，我收到了错误。
以下是官方文档中的示例：
<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实例，并在其他地方声明。但是，我收到了这个错误：
属性或方法“handle”未在实例上定义，但在呈现期间引用。确保在数据选项中声明反应数据属性。
我尝试过的第二种方法是通过事件处理程序直接从视图调用函数。我来自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>