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>

vuejs - 如何使用带有道具的手表？

vuejs - how to use watch with props?

javascript

watch

vuejs2