VueJS Watcher对prop的更改没有反应

Question

我有一个简单的.vue组件，其中有一个道具request和一个观察者来观看这个道具。如果request是true，那么我将调用一个方法。

问题是，我的观察者没有对更改做出反应。

我试图使下面的代码起作用。

foobar.vue

<template><div> ... </div></template>

<script>
export default {    
  // ... 
  props: {
    request: {
      type: Boolean,
      required: false,
      default: false 
    }
  },
  watch: {
    request (state) {
      if(state) {
        // run some method
      }
    } 
  }
}
</script>

我现在将其称为（在需要后）

<template>
  <foobar :request="access"> </foobar> 

  <button @click="access = !access"> {{ access ? 'Turn off' : 'Turn on'}} </button>
</template>

<script>
export default {
  data () {
    return { access: false }
  },
  components: { foobar }
}
</script>

Answer 1

将观察者设置为immediate。

watch: {
 request :
   immediate:true, 
    handler(state) {
      if(state){
      // run some method
      }
    }
  } 
 }
}