vuejs-如何在道具上使用手表？

Question

我正在尝试访问道具数据以在vue js的watch方法中使用，但显然似乎可以做任何事情，这是我所做的：

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组件初始化过程中触发。 仅当您稍后从某个位置更改该值时，它才会触发。

看下面的例子

 new Vue({ el: '#app', data: { text: 'Hello' }, components: { 'child' : { template: `<p>{{ extdesktop }}</p>`, props: ['extdesktop'], watch: { 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>