vue3 ref demo 1102

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

export default defineComponent({
  setup() {
        const fields = ['name', 'address', 'email'];
        const listWithRef = fields.map(field => ({
          domRef:ref<HTMLInputElement>(null),
      field,
        }));
    function readDomRefs(e: SubmitEvent) {
      e.preventDefault()
      console.log(listWithRef.map(item => item.domRef));
      return false;
    }
    return {
      listWithRef,
      readDomRefs,
    }
  }
})
</script>

<template>
  <form @submit="readDomRefs">
    <div v-for="item in listWithRef">
      <label :for="item.field">{{item.field}}</label>
        <input :id="item.field" :ref="item.domRef">
     </div>
    <button type="submit">测试</button>
  </form>
</template>

<style>
  form {
    display: flex;
    flex-direction: column;
  }
  form label {
    width: 80px;
    display: inline-block;
    text-align: right;
    margin-right: 4px;
  }
  form label::after {
    content: ":";
  }
  form input {
    width: 120px;
    margin: 4px 0;
  }
  form button {
    width: 80px;
  }
</style>