Comment changer un Vue.js valeur de données à l'intérieur d'une méthode appelée par un DOM événement?

Avertissement: je sais qu'il existe des données biding dans Vue.js.

J'ai donc 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>

D'une entrée qui sera le déclencheur d'une méthode appelée update chaque fois que l'utilisateur de taper dans quelque chose. L'idée ici est de changer la valeur de la propriété de données appelé info avec la valeur saisie dans le champ de saisie par l'utilisateur.

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

Alors, comment faire ce travail?

InformationsquelleAutor Artenes Nogueira | 2017-01-28

6

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

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>
```
- Supprimer la {{ info }} et voir sa valeur par extension chrome pour Vue. Vous verrez que ça ne marchera pas. J'ai fait la même chose que vous avez remarqué que la valeur que mis à jour quand un autre événement à partir de la Vue de l'instance est déclenché (pour certaines raisons).
- Si vous console.log(this.info) cette valeur est à se changer. Je suppose que je ne comprends pas le problème que vous rencontrez.
- Désolé de ne pas être assez clair. J'ai trouvé le problème et vous pouvez consulter ma réponse ici.
InformationsquelleAutor RyanZim
3

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

Dans un autre script j'ai fait la même chose, mais l'entrée était lié à un autre js cript qui a été l'application d'un masque à elle. Donc, ce qui a provoqué le problème de la info valeur n'est pas modifiée.

Ensuite, j'ai essayé de reproduire le problème dans ce script en question (sans la js masque de script) et puis j'ai pensé que rien n'évolue dans le info attribut parce que le extension chrome pour Vue.js m'a montré que la valeur n'a pas changé, a toujours été de rester vide, n'importe comment beaucoup j'ai tapé dans l'entrée (donc peut-être un problème d'environnement).

En fin de compte c'était juste un hicup de ma part et le vrai problème réside dans la liaison de deux bibliothèques différentes dans une seule entrée. Finalement, l'un d'eux ne fonctionne pas et c'est du contenu pour une autre question.

InformationsquelleAutor Artenes Nogueira

Vous pouvez toujours créer une liaison de données bidirectionnelle à l'aide de v-model, donc essentiellement de liaison de la valeur du champ de saisie pour le info de la propriété. De cette façon, la valeur de info est mis à jour lorsque l'utilisateur saisit quelque chose dans le champ de saisie.

Exemple ci-dessous:-

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>

Merci pour la réponse! Mais mon problème était autre chose en fait. Vous pouvez checout ma réponse ici.

InformationsquelleAutor kkaosninja

Vous devez vous connecter pour publier un commentaire.