Search code examples
vue.jskonvajs

Konvajs + Vuejs how to access stage width in vue

When using Konva without vue, I can access and modify stage width like this:

var stage = new Konva.Stage({
        container: 'container',
        width: stageWidth,
        height: stageHeight
      });

stage.width(100); //good

I do not how to access stage object and by extension set its width using vuejs:

<template>
  <v-stage :config="configKonva">
    <v-layer>
      <v-circle :config="configCircle"></v-circle>
    </v-layer>
  </v-stage>
</template>

<script>


export default {
 methods: {
  setWidth(width) {
   //here I want to access stage and set it's width
 }
}
}

</script>
Solution

  • You need to add "ref" for v-stage. After that you'll get direct access to the v-stage component instance. So after that you can call its method getStage(). 

    <v-stage :config="configKonva" ref="konva">

...

export default {
 methods: {
  setWidth(width) {
   this.$refs.konva.getStage().width(640);
 }
}