web-dev-qa-db-fra.com

Comment modifier une valeur de données Vue.js dans une méthode appelée par un événement DOM?

Disclaimer: Je sais qu'il y a des données en attente dans Vue.js.

Donc j'ai ceci:

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

Une entrée qui déclenchera une méthode appelée update chaque fois que l'utilisateur saisira quelque chose. L'idée ici est de changer la valeur de la propriété data appelée info avec la valeur saisie dans l'entrée par l'utilisateur.

Mais, pour une raison quelconque, la valeur de l'attribut de données ne change pas. La valeur d'entrée actuelle est imprimée normalement dans la console avec l'appel console.log(value) chaque fois que la méthode update est déclenchée, mais rien ne change pour l'attribut info.

Alors, comment faire ce travail?

javascripthtmldomvue.js
6
Artenes Nogueira

Le problème ici est que j'ai mélangé deux contextes différents.

Dans un autre script, je faisais la même chose, mais l'entrée était liée à un autre script js qui lui appliquait un masque. Cela a donc causé le problème de la non-modification de la valeur info.

Ensuite, j’ai essayé de reproduire le problème de ce script dans la question (sans le script de masque js), puis j’ai pensé que rien ne changeait dans l’attribut info car l’extension chrome de Vue.js m’avait montré que la valeur n’avait pas changé. changé , restait toujours vide, peu importe le nombre de réponses saisies (donc peut-être un problème environnemental).

En fin de compte, ce n’était qu’un problème de ma part et le véritable problème est de relier deux bibliothèques différentes en une seule entrée. Finalement, l’un d’eux ne fonctionnera pas et c’est le contenu d’une autre question.

2
Artenes Nogueira

Je ne vois pas quel est votre problème; votre exemple fonctionne parfaitement:

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

Vous pouvez toujours créer une liaison de données bidirectionnelle à l'aide de v-model, liant ainsi essentiellement la valeur du champ d'entrée à la propriété info. De cette façon, la valeur de info est mise à jour lorsque l'utilisateur entre quelque chose dans le champ de saisie.

Exemple ci-dessous: -

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