VueJs在请求axios中获取值输入单选

Question

你好我有这个对象

values: {
            false: 'order expected',
            true: 'order cancel'
        }

我在单选按钮内循环这个对象我不想在单选按钮中获取值（真或假）以添加到我的请求 axios 我这样做

<div
                    v-for="(index, type) in values"
                    :key="type.id"
                    class="filters__filter-items__type"
                  >
                    <radio-button
                      v-model="order"
                      checked-color="black"
                      class="filters__filter-items__type__radio"
                      :value="index"
                      :name="type"
                      :label="type"
                    />
                  </div>

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

export default {
 data() {
  return {
    order:''
   }
 },
 methods: {
async applyFilters() {
      const app = { $axios: this.$axios };
      const results = await endPoint.searchOrder(
        app,
        this.order
      );
      return results;
    },
  }
}

当我这样做时，我的请求参数是&params=order expected not &params=false我不明白为什么请帮助我谢谢

Answer 1

当用v-for迭代一个对象时，第一个参数是value ，第二个是key ：

<div v-for="(index, type) in values">
             👆value 👆key

您当前正在将对象值（即order canceled等）绑定到单选按钮的值，但该绑定实际上应该使用对象键（即false ）。

一个快速的解决方法是将index变量交换为v-for中的type ：

<!-- BEFORE -->
<div v-for="(index, type) in values">

<!-- AFTER -->
<div v-for="(type, index) in values">

...或在您的绑定中：

<!-- BEFORE -->
<radio-button v-model="order"
              :value="index"
              :name="type"
              :label="type"
              />

<!-- AFTER -->
<radio-button v-model="order"
              :value="type"
              :name="index"
              :label="index"
              />

演示