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选项中声明反应性数据属性。

我尝试过的第二种方法是通过事件处理程序直接从视图调用函数。我来自于反应，所以这是我最好的方法。但是，函数没有定义为输入值，这意味着它没有获取输入的值。

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

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

我真不明白为什么这两样都不管用。输入侦听器的预期行为不是传递值吗？

我哪里出问题了？

看起来，您可能不得不这样做：当v模型发生变化时，如何触发事件？(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的某个地方解释的，但我可能错了。:)