Vue.js 3/TypeScript中如何从数组获取ref对象的名称

我通过v-model把表单多个字段绑定到不同的ref对象，现在要把这些数据存入FormData，但不想重复调用formData.append()方法。我尝试把ref对象放进数组遍历，却没法获取ref对象对应的字段名——用Object.keys(key)[0]拿到的是__v_isShallow，找不到实际的属性名。

我的代码如下：

<script setup lang="ts">
const surname = ref("");
const name = ref("");
const company = ref("");
const phone = ref("");
const email = ref("");
const msg = ref("");

async function submitForm(submit: Event) {
  
  const helperArr = [surname, name, company, phone, email, msg, token];
  const formData = new FormData();
  helperArr.forEach((key) => {
    formData.append(Object.keys(key)[0], key.value);
  });
await axios.post(apiEndpoint, formData, {
    headers: {
      "Content-Type": "application/json",
    },
  }).then((res) => {
    console.log(res);
  });
}
</script>

解决方法 #

方法1：用键值对数组存储字段名与ref对象 #

既然无法直接从ref对象中提取变量名，就手动将字段名和对应的ref对象配对存储，遍历的时候直接取用即可。

修改后的代码：

<script setup lang="ts">
const surname = ref("");
const name = ref("");
const company = ref("");
const phone = ref("");
const email = ref("");
const msg = ref("");
const token = ref(""); // 假设token为已定义的ref对象

async function submitForm(submit: Event) {
  // 用数组存储[字段名, ref对象]的键值对
  const fieldPairs = [
    ['surname', surname],
    ['name', name],
    ['company', company],
    ['phone', phone],
    ['email', email],
    ['msg', msg],
    ['token', token]
  ];

  const formData = new FormData();
  fieldPairs.forEach(([fieldName, refObj]) => {
    formData.append(fieldName, refObj.value);
  });

  try {
    const res = await axios.post(apiEndpoint, formData);
    console.log(res);
  } catch (err) {
    console.error('提交失败', err);
  }
}
</script>

方法2：用单个reactive对象统一管理表单字段 #

更简洁的方式是将所有表单字段放入一个reactive对象中，直接遍历对象的键值对生成FormData。

修改后的代码：

<script setup lang="ts">
import { reactive } from 'vue';

// 用reactive统一管理所有表单字段
const formState = reactive({
  surname: "",
  name: "",
  company: "",
  phone: "",
  email: "",
  msg: "",
  token: ""
});

async function submitForm(submit: Event) {
  const formData = new FormData();
  // 遍历reactive对象的键值对
  Object.entries(formState).forEach(([key, value]) => {
    formData.append(key, value);
  });

  try {
    const res = await axios.post(apiEndpoint, formData);
    console.log(res);
  } catch (err) {
    console.error('提交失败', err);
  }
}
</script>

重要注意事项 #

• 使用FormData提交时，不要手动设置Content-Type: application/json，浏览器会自动添加正确的multipart/form-data请求头（带boundary参数），否则后端可能无法正确解析数据。
• 如果采用reactive对象的方案，模板中的v-model直接绑定formState.surname这类属性即可，用法和之前的ref绑定一致。

内容的提问来源于stack exchange，提问作者Padda