Descargo de responsabilidad: yo sé que no hay datos que aguardan en Vue.js.

Así que tengo este:

<html>
<body>

    <div id="app">
        <input @input="update">
    </div>

    <script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
    <script type="text/javascript">

        new Vue({

            el: '#app',

            data: {

                info: '',

            },

            methods: {

                update: function (event) {

                    value = event.target.value;

                    this.info = value;
                    console.log(value);

                }

            }

        });

    </script>

</body>
</html>

De una entrada que se va a desencadenar un método llamado update cada vez que el usuario escriba algo. La idea aquí es para cambiar el valor de la propiedad de datos llamado info con el valor escrito en la entrada por el usuario.

Pero, por alguna razón, el valor del atributo de datos no cambia. El actual valor de entrada se imprimen normalmente en la consola con el console.log(value) llamada cada vez que el update método es despedido, pero no cambia nada a la info atributo.

Así que, ¿cómo hacer que esto funcione?

3 Comentarios

  1. 6

    Que no estoy viendo cuál es tu problema, tu ejemplo funciona perfectamente:

    JS:

    new Vue({
    
      el: '#app',
    
      data: {
    
        info: '',
    
      },
    
      methods: {
    
        update: function(event) {
    
          value = event.target.value;
    
          this.info = value;
          console.log(value)
        }
    
      }
    
    });

    HTML:

    <script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
    <div id="app">
      <input @input="update">
      {{ info }}
    </div>

    • Quitar el {{ info }} y ver su valor a través de la extensión de chrome para Vue. Verás que no funciona. Yo hice lo mismo que usted hizo y notó que el valor sólo se actualiza cuando otro evento de la Vue instancia es despedido (por alguna razón).
    • Si la consola.log(this.info) que es el valor para cambiar. Supongo que no entiendo el problema que tiene.
    • Perdón por no ser lo suficientemente clara. He encontrado el problema, y usted puede comprobar fuera de mi respuesta aquí.
  2. 3

    El problema aquí es que he mezclado dos contextos diferentes.

    En otro script que me estaba haciendo la misma cosa, pero la entrada fue encuadernada a otro js cript que estaba aplicando una máscara para él. Así, que causó el problema de la info valor no va a cambiar.

    Entonces traté de reproducir el problema en esta secuencia de comandos en la pregunta (sin el js de la máscara de la secuencia de comandos) y, a continuación, pensé que no había nada que cambiar en la info atributo porque el extensión de chrome para Vue.js me mostró que el valor no ha cambiado, siempre fue quedándose vacía no importa lo mucho que me has escrito en la entrada (así que tal vez un problema de entorno).

    Al final esto fue sólo un hicup de mi parte y el problema real radica en la unión de dos bibliotecas diferentes en una sola entrada. Finalmente, uno de ellos no va a funcionar y este es el contenido de otra pregunta.

  3. 1

    Siempre se puede crear un enlace de datos bidireccional utilizando v-model, por lo tanto, esencialmente, de unión el valor del campo de entrada para el info de la propiedad. De esta manera, el valor de info se actualiza a medida que el usuario introduce algo en el campo de entrada.

    Ejemplo a continuación:-

    HTML:

        <!DOCTYPE html>
        <html lang="en">
        
        <head>
            <meta charset="UTF-8">
            <title>Vue.js stuff</title>
        </head>
        
        <body>
        
            <div id="app">
                <div>You typed {{info}}</div>
                <br>
                <input type="text" v-model="info">
            </div>
        
        </body>
        <script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
        <script>
            var app = new Vue({
                el: "#app",
                data: {
                    info: ""
                }
            });
        </script>
        
        </html>

    • Gracias por la respuesta! Pero mi problema era otra cosa, en realidad. Usted puede checout mi respuesta aquí.

Dejar respuesta

Please enter your comment!
Please enter your name here