Как получить все инпуты из ref во Vue3?

Question

[SM_ST]

Всем привет!

Подскажите как получить массив инпутов?

сейчас в функции onFocus выводит только последний инпут, остальные он не видит

где накосячил? спасибо

<template>
  <div>
    <div :class="$style.inputVerify">
      <input
        v-for="(v, index) in values"
        ref="inputRefs"
        :key="index"
        type="number"
        required="true"
        pattern="[0-9]"
        maxlength="1"
        :class="$style.inputVerifyItem"
        :autoFocus="index === autoFocusIndex"
        :data-id="index"
        :value="v"
        @input="onValueChange"
        @click="onFocus"
        @keydown="keyPres"
      />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

export default defineComponent({
  props: {
    fields: {
      type: Number,
      default: 4,
    },
    timerSeconds: {
      type: Number,
      default: 20,
    },
  },

  setup(props, { emit }) {
    const autoFocusIndex = ref(0);
    const values = ref<any[]>([]);
    const inputRefs = ref<any>([]);
    const fields = ref(props.fields) as any;
    const seconds = ref(props.timerSeconds) as any;
    const timerInterval = ref() as any;

    for (let i = 0; i < fields.value; i++) {
      values.value.push("");
    }

    const onFocus = (e: any) => {
      const index = parseInt(e.target.getAttribute("data-id"));

      console.log(index)

      inputRefs.value[index] = "";
      values.value[index] = "";

      if (!values.value[index] && index !== 0) {
        console.log(inputRefs.value)
      }
    };

    return {
      onFocus,
    };
  },
});
</script>

Answer 1

[SM_ST]

разобрался, сделал так

:ref="el => { if (el) inputRefs[index] = el }"