Estoy construyendo un componente en Vue.js. Tengo una entrada en la página donde el usuario puede pedir una cierta cantidad de crédito. Actualmente, estoy tratando de hacer una función que se registro la cantidad de entrada a la consola, como yo la escriba. (Eventualmente, les voy a mostrar/ocultar los documentos solicitados se basa en la entrada de usuario. No quiero que ellos tengan que haga clic en el botón de enviar.)

El código de abajo registros cuando me ficha/haga clic fuera del campo de entrada. Aquí está mi componente.vue:

<template>
    <div class="col s12 m4">
      <div class="card large">
        <div class="card-content">
          <span class="card-title">Credit Limit Request</span>
          <form action="">
            <div class="input-field">
              <input v-model="creditLimit" v-on:change="logCreditLimit" id="credit-limit-input" type="text">
              <label for="credit-limit-input">Credit Limit Amount</label>
            </div>
          </form>
          <p>1. If requesting $50,000 or more, please attach Current Balance Sheet (less than 1 yr old).</p>
          <p>2. If requesting $250,000 or more, also attach Current Income Statement and Latest Income Tax Return.</p>
        </div>
      </div>    
    </div>
  </div>
</template>

<script>
export default {
  name: 'licenserow',
  data: () => ({
    creditLimit: ""
  }),
  methods: {
    logCreditLimit: function (){
      console.log(this.creditLimit)
    }
  }
}
</script>

Si puedo cambiar methods a computed, funciona, pero me sale un error que dice Invalid handler for event: change cada vez que se registra el valor.

InformationsquelleAutor John P | 2017-09-19

2 Comentarios

  1. 12

    Utilizar el input evento.

    <input v-model="creditLimit" v-on:input="logCreditLimit" id="credit-limit-input" type="text">

    cambiar sólo se desencadena cuando el elemento pierde el foco para los elementos de entrada. input incendios cada vez que los cambios de texto.

    • Que lo hizo. Yo sabía que era algo simple. =) Gracias!
    • funciona perfectamente como un cambio de escucha e incluso con v-modelo. gracias
  2. 0

    Vinculante @evento de entrada junto con v-modelo es innecesario. Simplemente se unen v-modelo y eso es todo. El modelo se actualiza automáticamente en la entrada del evento.

    JS:

    new Vue({
      el: '#app',
      data: {
        message: ''
      }
    })

    HTML:

    <script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
    
    <div id="app">
      <input type="text" v-model="message"><br>
      Output: <span>{{ message }}</span>
    </div>

    Y si usted necesita iniciar sesión en cambio en consola, cree particular watcher:

    JS:

    new Vue({
      el: '#app',
      data: {
        message: ''
      },
      watch: {
        message: function (value) {
          console.log(value) //log it BEFORE model is changed
        }
      }
    })

    HTML:

    <script src="https://unpkg.com/[email protected]/dist/vue.min.js"></script>
    
    <div id="app">
      <input type="text" v-model="message"><br>
      Output: <span>{{ message }}</span>
    </div>

Dejar respuesta

Please enter your comment!
Please enter your name here