vuejs - どのように小道具で時計を使用するには？

Question

私がやっていること、ここで、VUEのJSに時計のメソッド内で使用する小道具データにアクセスしようとしているが、どうやら何もするようですしています：

HTML

   <lista-servizi-blu 
       :servizi="modello" 
       :extdesktop="servizi_selezionati_desktop" 
       v-on:centramappa="mappaCenter($event)" 
       v-on:linebigger="inebigger($event)"> 
       </lista-servizi-blu> 

JAVASCRIPT（コンポーネント）

props: ['servizi','extdesktop'], 
    watch: { 
    extdesktop: function(val, oldVal){ 
     alert(val); 
     this.mostraDescLungaBlu(); 
    } 
} 

警告が表示されないようですが、どうすればこの問題を解決できますか？ ありがとうございます。

Answer 1

extDesktop watchは、Vueコンポーネントのinitプロセスで起動しません。後でどこかで値を変更する場合にのみトリガされます。

次の例を見て

new Vue({ 
 
    el: '#app', 
 
    data: { 
 
    text: 'Hello' 
 
    }, 
 
    components: { 
 
    'child' : { 
 
     template: `<p>{{ extdesktop }}</p>`, 
 
     props: ['extdesktop'], 
 
     watch: { 
 
     \t extdesktop: function(newVal, oldVal) { 
 
      // watch it 
 
      alert('Prop changed: ' + newVal + ' | was: ' + oldVal); 
 
      console.log('Prop changed: ', newVal, ' | was: ', oldVal) 
 
     } 
 
     } 
 
    } 
 
    } 
 
});

<script src="https://unpkg.com/vue/dist/vue.js"></script> 
 

 
<div id="app"> 
 
    <child :extdesktop="text"></child> 
 
    <button @click="text = 'Another text'">Change text</button> 
 
</div>