Watch props not working (Vuejs 3 & Inertiajs Laravel)

need help, i am trying to listen for data change in props but not working,

export default {
  props: {
    toast: Object,
  },
  data() {
    return {
      visible: false,
    }
  },
  watch: {
    toast: {
      deep: true,
      handler(val, oldVal) {
        console.log(val)
      },
    },
  },
}

Manouher

5 years ago

Best Answer

Level 1

looking at the inertiajs documentation i was able to solve the problem by modifying the code like this

export default {
  data() {
    return {
      visible: false,
    }
  },
  watch: {
    toast: {
      deep: true,
      handler(val, oldVal) {
        console.log(val)
      },
    },
  },
  computed: {
    toast() {
      return this.$page.props.toast
    },
  },
}

Please or to participate in this conversation.