I have a polygonCrop ponent which one of them has a ref with canvas property, I am using each ponent in separate crop functions on two button ponents so I would like to know how to use multiple refs with multiple ponents in Vue.js?

<polygonCrop 
    :canvasClass="'some-class'"
    :height="600"
    :imageSource="imgSrc"
    :showCanvas="show"
    :showPointer="showPointer"
    :width="800"
    ref="canvas"
></polygonCrop>
<polygonCrop 
    :canvasClass="'some-class'"
    :height="600"
    :imageSource="imgSrc1"
    :showCanvas="show"
    :showPointer="showPointer"
    :width="800"
    ref="canvas1"
></polygonCrop>
...
<b-button @click.prevent="crop" variant="success">Crop</b-button>
<b-button @click.prevent="crop1" variant="success">Crop</b-button>
...
crop: function () {
    this.$refs.canvas.crop();
    this.resultImage = this.$refs.canvas.resultImage;
    this.show = false;
    this.showResult = true;
},
crop1: function () {
    this.$refs.canvas1.crop();
    this.resultImage1 = this.$refs.canvas1.resultImage;
    this.show = false;
    this.showResult = true;
},

I am using multiple canvases like canvas and canvas1 but I want to know if this is the right way to do this?

I have a polygonCrop ponent which one of them has a ref with canvas property, I am using each ponent in separate crop functions on two button ponents so I would like to know how to use multiple refs with multiple ponents in Vue.js?

<polygonCrop 
    :canvasClass="'some-class'"
    :height="600"
    :imageSource="imgSrc"
    :showCanvas="show"
    :showPointer="showPointer"
    :width="800"
    ref="canvas"
></polygonCrop>
<polygonCrop 
    :canvasClass="'some-class'"
    :height="600"
    :imageSource="imgSrc1"
    :showCanvas="show"
    :showPointer="showPointer"
    :width="800"
    ref="canvas1"
></polygonCrop>
...
<b-button @click.prevent="crop" variant="success">Crop</b-button>
<b-button @click.prevent="crop1" variant="success">Crop</b-button>
...
crop: function () {
    this.$refs.canvas.crop();
    this.resultImage = this.$refs.canvas.resultImage;
    this.show = false;
    this.showResult = true;
},
crop1: function () {
    this.$refs.canvas1.crop();
    this.resultImage1 = this.$refs.canvas1.resultImage;
    this.show = false;
    this.showResult = true;
},

I am using multiple canvases like canvas and canvas1 but I want to know if this is the right way to do this?

• javascript
• vue.js

• 1 use v-for to avoid repetition and crop function should be one which takes ref as an argument – Mohsin Amjad Commented Jan 1, 2021 at 7:11

1 Answer 1

First of all, I would not remend using this approach if you have multiple elements with unique props for each element, what you should be doing is to create an array that contains multiple objects, each object includes the data needed for that canvas. for example:

data(){
  return {
      canvases:[
        {
          class: 'class-name',
          imgSrc: 'image-source',
          width: 800,
          height: 600,
          ....
        },
        {
          class: 'class-name-2',
          imgSrc: 'image-source-2',
          width: 800,
          height: 600,
        }
         ....
      ]
  }
}

and then loop through this array:

<!-- 5 elements -->
<polygonCrop 
             v-for="(canvas, i) in canvases"
             :key="i"
             :canvasClass="canvas.class"
             :height="canvas.height"
             :imageSource="canvas.imgSrc"
             :showCanvas="show(i)"
             :showPointer="showPointer"
             :width="800"
             :ref="'canvas-' + i"
></polygonCrop>

However if you wanna keep your code structure the way it is, here is a solution for you

For the DOM, use a v-for loop with dynamic ref binding, for the image sources use a method to match the data variables name:

<!-- 5 elements -->
<polygonCrop :canvasClass="'some-class'"
             :height="600"
             :imageSource="getSource('imgSrc' + n)"
             :showCanvas="show"
             :showPointer="showPointer"
             :width="800"
             v-for="n in 5"
             :key="n"
             :ref="'canvas-' + n"
></polygonCrop>
<b-button @click.prevent="crop(n)" variant="success" v-for="n in 5">Crop {{n}}</b-button>

and use only one crop function, with a parameter:

// methods
crop: function (n) {
    const canvas = 'canvas-' + n 
    this.$refs[canvas].crop();
    this.resultImage = this.$refs[canvas].resultImage;
    this.show = false;
    this.showResult = true;
},
getSource : function(img) {
  return this[img]
}