Vue循环对象生成radio单选框，axios请求传参不符合预期如何解决

问题原因 #

1. Vue中遍历对象的v-for参数顺序错误，正确语法为v-for="(值, 键, 索引) in 目标对象"。你的写法(index, type) in values里，index实际拿到的是'order expected'/'order cancel'这类字符串值，你想要的布尔键存在第二个参数type中。
2. 你给单选框绑定的:value="index"实际绑定了字符串值，因此v-model关联的order变量最终拿到的是文本值，不是预期的布尔值。
3. 额外问题：JS对象的键仅支持字符串/Symbol类型，你定义的布尔键false/true会被自动转为字符串'false'/'true'，取值时需要做类型转换。:key="type.id"写法也无效，type本身是键，不存在id属性。

解决方案 #

第一步：修改模板代码 #

<div
  v-for="(labelText, boolKey) in values"
  :key="boolKey"
  class="filters__filter-items__type"
>
  <radio-button
    v-model="order"
    checked-color="black"
    class="filters__filter-items__type__radio"
    :value="boolKey === 'true'" <!-- 将字符串键转回布尔值 -->
    :name="boolKey"
    :label="labelText"
  />
</div>

<button @click="applyFilters"> send </button>

第二步：修改逻辑代码 #

export default {
 data() {
  return {
    order: false // 初始值改为布尔类型，和实际值类型匹配
   }
 },
 methods: {
  async applyFilters() {
    const app = { $axios: this.$axios };
    const results = await endPoint.searchOrder(
      app,
      this.order
    );
    return results;
  },
}

核心修改点说明 #

• 调整v-for参数顺序，区分开键和值，直接用键作为:key
• 单选框:value绑定转换后的布尔值，保证order变量拿到的是布尔类型
• 初始化order为布尔值，避免类型不匹配的异常

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