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

Share Improve this question Follow edited Jan 1, 2021 at 8:24 Dan Knights 8,40844 gold badges2727 silver badges5454 bronze badges asked Jan 1, 2021 at 7:04 MahMah 10511 gold badge11 silver badge1010 bronze badges 1

• 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

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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]
}