Le rappel de prop surveillé d'un composant à l'intérieur d'une instruction v-if n'est pas appelé

J'ai un composant, "cmptest", qui a une propriété surveillée, "needWatch". Ce composant se trouve dans une instruction v-if, mais la fonction surveillée n'est pas appelée lors de son rendu.Le rappel de prop surveillé d'un composant à l'intérieur d'une instruction v-if n'est pas appelé

Comme illustré dans l'exemple, le prop "needWatch" est défini avec la propriété de données "value" de "cmpcheck", ce qui me laisse penser que le rappel de la montre doit être déclenché ici.

Si je supprime l'instruction v-if, la fonction est appelée comme prévu lorsque la case à cocher est activée.

<div v-if="value===true"><!--remove--> 
    <cmptest :need-watch="value"></cmptest> 
</div><!--remove-->

Est-ce intentionnel? Qu'est-ce que je fais mal ici?

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8"> 
    <title>Vue Example</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="vue.js"></script> 

    <script type="text/x-template" id="cmptesttemplate"> 
     <div> 
      <p>needWatch: {{needWatch}}</p> 
      <p>updateByWatch: {{updateByWatch}}</p> 
     </div> 
    </script> 

    <script type="text/x-template" id="cmpchecktemplate"> 
     <div> 
      <input id="checkBox" type="checkbox" value="1" v-on:click="setCheckboxValue()"> 
      <div v-if="value===true"> 
       <cmptest :need-watch="value"></cmptest> 
      </div> 
     </div> 
    </script> 

</head> 
<body> 
<div id="container"> 
    <cmpcheck></cmpcheck> 
</div> 
<script> 

    var cmptest = Vue.component('cmptest', { 
     template: '#cmptesttemplate', 
     data: function() { 
      return { 
       updateByWatch: '' 
      } 
     }, 
     props: ['needWatch'], 
     watch: { 
      needWatch: function(v) { 
       console.log('Watched!'); 
       this.updateByWatch = Math.random(); 
      } 
     } 
    }); 

    var cmpcheck = Vue.component('cmpcheck', { 
     template: '#cmpchecktemplate', 
     data: function() { 
      return { 
       value: 'Unitialized' 
      }; 
     }, 
     methods: { 
      setCheckboxValue: function() { 
       console.log('SELECTED'); 
       var el = $(this.$el).children('#checkBox').is(':checked'); 
       this.value = el; 
      } 
     } 
    }); 

    new Vue({ 
     el: '#container', 
     components: { 
      'cmptest': cmptest, 
      'cmpcheck': cmpcheck 
     } 
    }); 
</script> 
</body> 
</html>

Source

2017-10-02 Siegfried

Eh bien, aussi longtemps que value est Unitialized (donc pas true), <cmptest :need-watch="value"></cmptest> ne sera jamais rendu, de sorte que le veilleur n'existe pas réellement. Une fois que setCheckboxValue est appelée, si value est true, le cmptest sera rendu, puis l'observateur sera initialisé. Mais value est déjà true, donc il n'est pas déclenché.

Cependant, vous pouvez utiliser:

watch: { 
    needWatch: { 
    immediate: true, 
    handler(nv, ov) { ... } 
    } 
}

afin que vos pistes de rappel watcher lorsque needWatch est lancé.

Source

2017-10-02 12:43:01

Cela a fait le travail. Merci beaucoup Nicolas! – Siegfried

Le rappel de prop surveillé d'un composant à l'intérieur d'une instruction v-if n'est pas appelé

Répondre

Questions connexes