VueJs get value input radio in request axios - vue.js

Question

Hello i have this object
values: {
false: 'order expected',
true: 'order cancel'
}
I'm loop this object inside radio button i wan't to get the value (true or false) in radio button to add in my request axios i'm do that
<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;
},
}
}
when i do that my request params is &params=order expected not &params=false
I don't understand why please help me thanks

Answer 1

When iterating an object with v-for, the first argument is the value, and the second is the key:
<div v-for="(index, type) in values">
👆value 👆key
You're currently binding the object value (i.e., order canceled, etc.) to the radio button's value, but the binding should actually use the object key (i.e., false).
A quick fix is to swap the index variable for type in the v-for:
<!-- BEFORE -->
<div v-for="(index, type) in values">
<!-- AFTER -->
<div v-for="(type, index) in values">
...or in your bindings:
<!-- BEFORE -->
<radio-button v-model="order"
:value="index"
:name="type"
:label="type"
/>
<!-- AFTER -->
<radio-button v-model="order"
:value="type"
:name="index"
:label="index"
/>
demo