VueJS $watch $refs

Est-il possible de $watch Vue $refs?

Je suis désireux de jeu de logique par rapport à un composant enfant qui est imbriquée à l'intérieur de ma Vue instance, mais à l'intérieur de la ready rappel, $refs.childcomponent est d'abord undefined alors qu'il est traité.

à l'intérieur de ready()

this.$watch('$refs', function() {
    console.log("not firing");
}, { deep: true });

Résultat: Erreur: le Maximum de la pile d'appel dépassé

watch propriété de l'instance

watch: {
  '$refs': {
     handler: function() { console.log("hit"); },
     deep: true
  }
}

résultat: rien.

  • Est ; ici deep: true; est par la faute de frappe ?
  • Oui, ce n'est pas dans le code, c'est juste mon mauvais port sur stackoverflow. Bonne place, a été supprimée.
  • deep: true => au Maximum de la pile des appels taille dépassait
InformationsquelleAutor Kiee | 2016-08-19
  1. 16

    Vous pouvez $watch $refs.<name>.<data> mais pas $refs.<name> lui-même, pour ne pas mentionner $refs.

    https://jsfiddle.net/kenberkeley/9pn1uqam/

    const Counter = {
  data: () => ({
    i: 0
  }),
  template: `<fieldset>
    <p>Counter</p>
    <code>i = {{ i }}</code>
    <button @click="i += 1"> Add One </button>
  </fieldset>`
}

const App = {
  components: { Counter },
  mounted () {
    this.$watch(
        () => {
            return this.$refs.counter.i
        },
      (val) => {
        alert('App $watch $refs.counter.i: ' + val)
      }
    )
  },
  template: `<fieldset>
    <p>App</p>
    <counter ref="counter" />
  </fieldset>`
}

new Vue({
    el: '#app',
    render: h => h(App)
})
    • $refs.<nom> peut-être pas définie lors de la montée. vous devriez this.$watch(() => this.$refs.comp.prop, (val) => {...}) lors de la comp est créé.
    • Donc le faire dans mounted crochet
    • pas nécessairement, un élément avec une ref peut être créé à tout moment. Par exemple, un élément représentant un article peut être créé après un appel d'API a renvoyer une réponse, sur un clic de bouton.
    InformationsquelleAutor kenberkeley
  2. 10

    Non, $refs ne sont pas réactifs, la montre ne fonctionne pas.

    InformationsquelleAutor Linus Borg
  3. 2

    En montée utilisez le code ci-dessous:

    this.$watch(
        () => {
            return this.$refs.<name>.<data>
        },
      (val) => {
        alert('$watch $refs.<name>.<data>: ' + val)
      }
    )
    InformationsquelleAutor Ian Pinto