javascript - Multiple refs inside a Vue.js component

Question

I have a polygonCrop component which one of them has a ref with canvas property, I am using each component in separate crop functions on two button components so I would like to know how to use multiple refs with multiple components 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?

Answer 1

First of all, I would not recommend 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]
}