Stencil props aspect ratio change doesn't trigger change event

[gregkepler]

Hello there,

I have radio buttons to update the aspect ratio on the cropper stencil. I expect that when the aspect ratio changes in :stencil-props that it would trigger the change event from the cropper, but that doesn't seem to be the case.

Is this a correct assumption or is there another way to set the aspect ratio that would trigger a ui change as well as the change event?

Something like this

<template>
  <div id="app">
    <div class="example">
      <div class="col-12">
        <div class="radio-container">
            <div class="custom-control custom-radio d-inline-block">
                <input type="radio" :id="'radio-1'" class="custom-control-input" value="square" name="aspectRatio" v-model="aspectRatio">
                <label class="custom-control-label" :for="'radio-1'">1:1</label>
            </div>
            <div class="custom-control custom-radio d-inline-block">
                <input type="radio" :id="'radio-2'" class="custom-control-input" value="landscape" name="aspectRatio" v-model="aspectRatio">
                <label class="custom-control-label" :for="'radio-2'">4:3</label>
            </div>
            <div class="custom-control custom-radio d-inline-block">
                <input type="radio" :id="'radio-3'" class="custom-control-input" value="portrait" name="aspectRatio" v-model="aspectRatio">
                <label class="custom-control-label" :for="'radio-3'">3:4</label>
            </div>
        </div>
      </div>
      <cropper ref="cropper" class="example-cropper" :src="image" 
        :stencil-props="{
          aspectRatio: aspectRatioNumber,
        }"
        @change="onCropChange"
        />
    </div>
  </div>
</template>

<script>
import { Cropper } from "vue-advanced-cropper";
import "vue-advanced-cropper/dist/style.css";

export default {
  name: "App",
  data() {
    return {
      image:
        "https://placekitten.com/800/1000",
      aspectRatio: "square",
    };
  },
  computed: {
        // ...computed,
        aspectRatioNumber() {
            if (this.aspectRatio === "square") {
                return 1.0;
            } else if (this.aspectRatio === "landscape") {
                return 4 / 3;
            } else if (this.aspectRatio === "portrait") {
                return 3 / 4;
            }
            return 1.0;
        }
    },
  methods: {
    onCropChange({
        coordinates,
        canvas,
    }) {
      alert('change happened!')
    },
  },
  components: {
    Cropper,
  },
};
</script>

Example here: https://codesandbox.io/s/vue-cropper-aspect-ratio-change-zbzt8?file=/src/App.vue

Thank you.

[Norserium]

@gregkepler, thank you for your report. Fixed in 1.3.2.

[gregkepler]

@Norserium Thank you, looks good here!

[Norserium]

@gregkepler, you are welcome!