VueJs get value input radio in request axios

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

Thats not an array, it is an object. And you can't use v-for for objects. — Daniel
– Daniel, Commented Oct 3, 2021 at 1:43
@Daniel That's not true. v-for can be used with objects. — tony19
– tony19, Commented Oct 3, 2021 at 7:04

tony19 · Accepted Answer · 2022-07-16 02:13:31Z

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

edited Jul 16, 2022 at 2:13

answered Oct 3, 2021 at 7:06

tony19

140k24 gold badges281 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

VueJs get value input radio in request axios

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related