<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>
