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 实例，并在其他地方声明了这一点。但是，我收到此错误：

属性或方法“句柄”未在实例上定义，但在渲染期间被引用。确保在 data 选项中声明响应式数据属性。

我尝试过的第二种方法是通过事件处理程序直接从视图中调用函数。我来自 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-model 时必须手动附加观察者？这不就是 v-model 应该做的吗？

最终奏效的是：

<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 的某个地方进行了解释，但我可能错了。 :)