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（COMPONENT）

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: { 
      	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 - 如何使用带道具的手表？

1 个答案: