wake-up-neo.com

Wie kann ich einen Vue.js-Datenwert innerhalb einer Methode ändern, die von einem DOM-Ereignis aufgerufen wird?

Haftungsausschluss: Ich weiß, dass es in Vue.js Daten gibt.

Also habe ich folgendes:

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

Eine Eingabe, die eine Methode namens update jedes Mal auslöst, wenn der Benutzer etwas eingibt. Die Idee ist hier, den Wert der data-Eigenschaft mit dem Namen info mit dem vom Benutzer in die Eingabe eingegebenen Wert zu ändern.

Aus irgendeinem Grund ändert sich der Wert des Datenattributs jedoch nicht. Der aktuelle Eingabewert wird normalerweise mit dem Aufruf console.log(value) in der Konsole gedruckt, wenn die Methode update ausgelöst wird. Das Attribut info ändert jedoch nichts.

Also, wie soll das funktionieren?

javascripthtmldomvue.js
6
Artenes Nogueira

Das Problem hier ist, dass ich zwei verschiedene Kontexte gemischt habe.

In einem anderen Skript habe ich dasselbe gemacht, aber die Eingabe wurde an einen anderen js-Cript gebunden, der eine Maske darauf anwendete. Dies führte zu dem Problem, dass der info-Wert nicht geändert wurde.

Dann habe ich versucht, das Problem in diesem Skript in der Frage zu replizieren (ohne das Skript js mask), und dann dachte ich, dass sich im Attribut info nichts geändert hat, da die Erweiterung chrome für Vue.js mir zeigte, dass der Wert nicht der Fall war geändert , blieb immer leer, egal wie viel ich die Eingabe eingegeben habe (vielleicht ein Umgebungsproblem).

Am Ende war dies nur ein Mühefehler von mir, und das eigentliche Problem besteht darin, zwei verschiedene Bibliotheken in einer einzigen Eingabe zu binden. Irgendwann wird einer von ihnen nicht funktionieren, und dies ist der Inhalt einer anderen Frage.

2
Artenes Nogueira

Ich sehe nicht, was dein Problem ist. Dein Beispiel funktioniert perfekt:

new Vue({

  el: '#app',

  data: {

    info: '',

  },

  methods: {

    update: function(event) {

      value = event.target.value;

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

  }

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

4
RyanZim

Sie können immer eine bidirektionale Datenbindung mithilfe von v-model erstellen, wodurch der Wert des Eingabefelds im Wesentlichen an die info-Eigenschaft gebunden wird. Auf diese Weise wird der Wert von info aktualisiert, wenn der Benutzer etwas in das Eingabefeld eingibt.

Beispiel unten: -

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

1
kkaosninja