CODEWITHSUNDEEP
javascriptvue.js
user3162553
user3162553

Reputation: 2859

Binding Input in Vue not working

I would like to call a function with a value when a user starts typing in an input box. I have tried two approaches.

The first approach is trying to use two-way binding to a model. However, after following the documentation I get an error.

Here is the example from the official docs:

<div id="app-6">
  <p>{{ message }}</p>
  <input v-model="message">
</div>


var app6 = new Vue({
  el: '#app-6',
  data: {
    message: 'Hello Vue!'
  }
})

And here's my example:

<template lang="html">
  <input
    type="text"
    v-model="handle"
  />
</template>


<script>    
  export default {
    data: {
      handle: 'model',
    }
  };
</script>

I am writing this as part of an application so I chose not to recreate the Vue instance and I declared that elsewhere. However, I get this error:

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.

A second approach I've tried is this calling a function directly from the view via an event handler. I'm coming from React so this is my preferable approach. However, the function has undefined as an input value meaning it's not picking up the value of the input.

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

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

I really can't see why neither of these works. Wouldn't the expected behavior of an input listener would be to pass the value?

Where am I going wrong?

It seems like you might have to do something like this: How to fire an event when v-model changes ? (vue js). What I don't understand is why you have to manually attach a watcher when you have assigned a v-model? Isn't that what a v-model is supposed to do?

What finally worked was this:

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

Upvotes: 4

Views: 4344

Answers (1)

Anthony
Anthony

Reputation: 599

Shouldn't data be a function on your first example? I think this is how it works for vue components.

<script>    
  export default {
    data: function () {
      return { handle: 'model' }
    }
  };
</script>

I think this was explained somewhere on vuecasts.com, but I might be wrong. :)

Upvotes: 4

Related Questions