javascript - Vue 中的绑定(bind)输入不起作用

Question

我想在用户开始在输入框中输入时调用一个带有值的函数。我尝试了两种方法。

第一种方法是尝试对模型使用双向绑定(bind)。但是，在按照文档进行操作后，我得到了一个错误。

这是官方文档中的示例:

<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.

我尝试过的第二种方法是通过事件处理程序直接从 View 调用函数。我来自 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 的某个地方得到了解释，但我可能是错的。 :)