Level 63
And if you use a different refs (dynamically) for each group of radio buttons ?
Jun 5, 2022
4
Level 3
return value of selected radio button with v-for
I have a radio group for a form created with v-for. I need to return the value of the selected button in a function. Here's what I've tried:
Use the v-model value. The issue is it returns the value of the button previously checked. This is due to the function using the current form value before it updates. I tried to figure out how to delay it or call the function after click with no luck, then was reminded of refs.
So I added the ref not realizing it applies the same ref to all inputs. Which of course it does, but this it returns an array.
How do I choose the selected button? Is there a way to apply the ref only to the selected button?
<div v-for="mealService in mealServices" :key="mealService.id">
<input @click="setActiveMealService" type="radio" name="meal_type"
:id="mealService.meal_type_id"
:value="mealService.meal_type_id"
v-model="form.meal_type_id"/>
<label :for="mealService.meal_type_id">{{ mealService.meal_type.name }}</label>
</div>
Level 3
That looks like the way to do it. But how to I call the ref? Here's what I'm trying but it returns an empty array
<div v-for="mealService in mealServices" :key="mealService.id">
<input :ref="activeMealService => {activeMealService = mealService.meal_type_id}"
@click="setActiveMealService" type="radio" name="meal_type"
:id="mealService.meal_type_id"
:value="mealService.meal_type_id" v-model="form.meal_type_id"/>
<label :for="mealService.meal_type_id">{{ mealService.meal_type.name }}</label>
1 like
Level 63
Have a look at this. Does it help you ?
Level 3
A bit. I looked at this. I didn't understand (el)...is it element?
anyhow, I'm trying this
<input :ref="(el) => {activeMealService = mealService.meal_type_id}"
but it's not changing values when I click on a different button. I have a baby in m,y arms and have to run. I'll play with it tonight. Thanks for the tips. I appreciate you not giving me the answer so I learn to read docs, but very open (and hoping) to see an example/answer.
Please or to participate in this conversation.