vue.jsでラジオボタンのnameに指定された値も取得する方法

Question

vue.js3 + Typescriptで以下のようなラジオボタンを実装しています。
（hogeはjsonのデータが入っています。）

<div v-for="(value, index) in hoge" :key="index">
    <ul>
        <li v-for="item in value.options" :key="item.index">
        	<label>
        		<input type="radio" required="required"
        		 :name="value.numA"
        		 :value="item.numB"
        		 v-model="result[index]" />{{item.txt}}
        	</label>
        </li>
    </ul>
</div>

画面上は、

設問1
ラジオボタン○
ラジオボタン○
ラジオボタン○
ラジオボタン○

設問2
ラジオボタン○
ラジオボタン○
ラジオボタン○
ラジオボタン○
.
.
.

というようにラジオボタン4つのかたまりが複数並んでいます。
これをそれぞれ選択すると、v-modelのresultには、
["10", "22", "31", "40"]というように値が順番に入ります。

このとき、:valueに設定した値だけでなく、
:nameに設定した値も取得することは可能でしょうか？

最終的には、
value.numAとvalue.numBの値を、
Objectとして、以下のような形式にしたいです。

{
 "hogeHoge":[
  {"name":"1","num":"10"},
  {"name":"2","num":"10"},
  {"name":"3","num":"10"},
  {"name":"4","num":"10"}
 ]
}

配列をObjectにする方法は別の質問（https://teratail.com/questions/352497）で
教えていただいたのですが、
プロパティを増やす方法がわからず、、、

どうぞよろしくお願いいたします。

Answer 1

公式サイトよりrefを用いたらうまくいきました。これは自分がテストに用いたものですが、これと同じ働きをさせれば、divs.valueの中にidの値が代入されるようになり、これがdocument.getElementById('hoge')の戻り値と同じとなります。

あとはdivs.value[idx].nameとすればnameの値を取得できます。

• refAPIの使用
• refの定義
• フォームタグに:refの指定
• 受け皿となるdivsの定義
• メソッド内から変数divsを出力する

Usage inside v-for

<template>
  <div class="home">
		<label v-for="(m,idx) in state.ar_mode" :key="idx">
		<input type="radio" :id="`id${m.val}`" :name="`name${m.val}`" @click="selMode(m.val,idx)" :ref="(el) =>{if (el) divs[idx] = el }"/>{{m.head}}
		</label>
		<p>&nbsp;</p>
 </div>
</template>
<script>
import { reactive,ref } from 'vue'
export default {
	setup(){
		const divs =ref([])
		const state = reactive({
			mode: '',
			ar_mode: [
				{"head":'電卓',"val":'calc'},
				{"head":'写真',"val":'world'},
			],
		})
		const selMode = (sel,idx)=>{
			console.log(divs.value[idx].name)
			let mode = state.mode
			if(mode !== sel){
				mode = sel
			}
			state.mode = mode
		}
		return{divs,state,selMode}
	},
}

Comments

[weak_man]

ありがとうございます。助かりました。