VueJs calling :key in method

Question

im new to Vue and trying myself in Vue3 and Vuetify. Similar to this Post im trying to :key or ref a vue-signature-pad in a for loop. I initialize an empty Array and push a new element, which adds a new signature.

<template>
    <div>
        <v-container>
            <div class="row" v-for="(input, index) in inputs">
                <v-container>
                    <VueSignaturePad
                    id="signature"
                    width="100%"
                    height="300px"
                    ref="signaturePad"
                    />
                </v-container>
                <div class="buttons">
                    <button @click="undo">Undo</button>
                    <button @click="save">Save</button>
                </div>
            </div>
            <v-row justify="center">
                <v-btn  @click="addRow"
                    class="ma-2"
                    color="blue-grey"
                    icon="mdi-plus-circle-outline"
                ></v-btn>
            </v-row>
        </v-container>
    </div>
</template>

<script>
export default {
    data: () => ({
        inputs: [],
    }),
    methods: {
    addRow() {
        this.inputs.push({
            name: ''
        })
    },
    undo() {
        this.$refs.signaturePad.undoSignature();
    },
    save() {
      const { isEmpty, data } = this.$refs.signaturePad.saveSignature();

      alert("Open DevTools see the save data.");
      console.log(isEmpty);
      console.log(data);
    }
  }
}
</script>

<style scope>
</style>

In the Post i already mentioned, i tried the Solution from Mathieu Janio. So if i understand everything right, ref is not working and i have to use :key on the div itself. So i tried his Solution

    <template>
  <div
    class="row"
    v-for="(applicants, index) in applicant_details"
    :key="index"
  >
    <div class="col-sm-4">
      <div class="form-group">
        <p>Signature for {{ applicants.first_name }}</p>
      </div>
    </div>
    <div class="col-sm-4">
      <div class="form-group">
        <VueSignaturePad ref="" />
        <button type="button" @click="undo" class="btn btn-warning">
          Undo
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
const applicant_details = [
  { first_name: 'john', signature: '' },
];

const undo = () => {
  //will undo the signature
};
const save_signature = () => {
  //Save the signature
};
</script>

But now im stuck at calling the right "undo" The signatepad github example uses ref: at the single signaturepad, which is ok. but not working at the forloop

How do i call now the right function in "undo" for the solution above? I tried using "this.$.vnode.key" but this gives me an error. "Uncaught TypeError: Cannot read properties of undefined (reading '$')".

Answer 1

I figured my first way out.

Heres what i have done. The Signaturepad got an index on the ref.

<VueSignaturePad
:id="'signaturePad' + index"
width="100%"
height="300px"
:ref="'signaturePad' + index"
:options="options"
/>

The "undo" button is giving it "ref" with

<button @click="undo(`signaturePad${index}`)">Undo</button>

And the undo function itself has the first item in its ref array

undo(ref) {
    this.$refs[ref][0].undoSignature();
}

Maybe someone has some more efficient way. Feel free :)