Un signal sur input déclenche un watcher non lié (à l'intérieur d'un composant)

Bonjour à tous.

Je suis actuellement en train de costruire beaucoup de composants s’appuyant sur des input, and j’ai observé quelque chose d’étrange avec vue (2.6.10): quand an évènement de saisie (input’s event) est émis un « watcher » non lié (associé à une « props » sur une variable nommée « options ») est déclenché.

Pour préciser:

  • quand je tape dans un « input », ce code est appelé (ce qui est normal) : $emit(‘input’, $event.target.value),
  • un « watcher » qui n’a rien à voir est appelé.

Si vous testez avec le code fourni en tapant dans le « input », vous verrez le « watcher » appelé et le message « I’m here ! » d’affiché dans la console.

Quelqu’un a-t-il une idée ? Je pense plutôt à un bug (ou alors la doc n’est pa assez claire).

Voici le code d’exemple :

<!DOCTYPE html>
<html lang="en">
  <meta>
    <meta charset="UTF-8">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js" integrity="sha256-ufGElb3TnOtzl5E4c/qQnZFGP+FYEZj5kbSEdJNrw0A=" crossorigin="anonymous"></script>
  </meta>

  <body>
    <div id="toto">
              <toto :options='{}' v-model='msg'> </toto>
    </div>

    <script>
Vue.component('toto', {
    props: {
      value: {
          default: '',
          type: String
      },
      options: {
        default: {},
        type: Object
      },
    },
    watch: {
        options: function(newValue) {
          console.debug("COUCOU, I'm here !")
        },
    },
    template: `
      <input v-bind:value='value' v-on:input="$emit('input', $event.target.value)">
    `
})
    var toto = new Vue({
        el: "#toto",
        data: {
          msg: ''
        }
      });
    </script>

  </body>
</html>

ça ne résout pas le problème mais

  • data
  • default pour des objets
    doivent être des functions qui retournent un objet, pas un objet directement