Get value from Vue component in Laravel blade

Question

I'm trying to get a value easily from a component in Laravel blade,

<input name="avatar" type="hidden" :value="$refs.webcam.img" />
<webcam-avatar ref="webcam"></webcam-avatar>

I know this is wrong I just don't have sufficient knowledge in Vue, this is how I tried to show that I need back an image from the component.

Answer 1

in your vue components define watcher and emit event on webcam value change:

  watch: {
    webcam: function (val) {
      this.$emit('webcamchange',val)
    }
  }

then handle event on your main page:

<input name="avatar" type="hidden" :value="webcam.img" />
<webcam-avatar @webcamchange="webcam"></webcam-avatar>

don't forgot to define webcam on data section in your main page:

   data:function () {
    return {
      webcam:{}
      }
    }