javascript - 如何创建表单格式的json数组vuejs？

Question

我想问一下，我已经以单选按钮的形式在表格中输入了数据，之前我有我解析成表格的 json 数据。

这是我的 json

"item_tabel" : [
          { // array 0
            "method": [
                {"item_method": "IT001"},
                {"item_method": "IT002"}
            ],
            "innovation": [
                {"innovation_item": "Top down wall"},
                {"innovation_item" : "Top down Beton"}
              ],
          },
          { // array 1
           "method": [
                {"item_method": "IT003"},
                {"item_method": "IT004"}
            ],
            "innovation": [
                {"innovation_item": "Top down wall"},
                {"innovation_item" : "Top down Beton"}
              ],
          }
        ],

这是我的桌子

在此处输入图像描述

在每一行和每一列行的表格中，在单选按钮上选择 1 个输入，这是我的代码

<tbody>
   <tr v-for="(data, index) in result_estimate.item_tabel" :key="index">
     <td>{{index + 1}}</td>
     <td v-for="(n, ix) in data.item_name" :key="ix" class="left"> {{n.name}}</td>
     <td>
       <template v-for="(itm, i) in data.method">
         <p :key="i">
           <input type="radio" v-model="inp_met[index]" :value="itm.item_value" 
           @change="handleClickInput(data, index, i, itm.item_value)">
           <label>{{itm.item_method}}</label>
         </p>
       </template>
     </td>
     <td>
       <template v-for="(inn, row_in) in data.innovation">
         <p :key="row_in">
           <input type="radio" v-model="inp_in[index]" :value="inn.innovation_value">
           <label>{{inn.innovation_item}}</label>
         </p>
       </template>
     </td>
   </tr>
 </tbody>
  //button submit
 <button type="button" @click="submit_output">Save</button>

这是我的功能

export default {
        data(){
           return {
               inp_met: {},
               inp_in : {},
           }
        },
        computed: {
            ...mapState({ result_estimate: (state) => state.res_estimate }),
        },
        methods:{
            submit_output(){
                // I want to make a post format like this
                var submit = {
                     item : [
                     {  //row 1 in table
                        inp_met: 'IT002', here i choose index 0 from array to 1
                        inp_in : 'Top down wall-01'
                     },
                     {  //row 2 in table
                        inp_met: 'IT004', here i choose index 1 from array to 1
                        inp_in : 'Top down wall-03'
                     }]
                }
                console.log(submit);
            },
            handleClickInput(data, index, i, value) {
              console.log(value)
            },
        }
   }

我在提交功能上创建了一个静态格式，如何制作这样的？提前感谢那些帮助过的人。谢谢

标签： javascriptvue.jsvue-component