vue2 遍历input怎么绑定不同v-model以及输出对象结果

请教攻城狮们,自学练习的时候碰到一个问题,困扰我两天了,还没有解决,请不吝指点 !
1.在input输入框中输入任意值,所有的input全都会显示,如何给每个input 不同的v-model?
情况如下:

img

2.提交保存的时候,怎么样才能输出下方res这样的对象集合?

res: {
        a: { red: "8", yellow: "8", blue: "8" },
        b: { red: "8", yellow: "8", blue: "8" },
        c: { red: "8", yellow: "8", blue: "8" },
      },

3.test1,test2 数组的值,不是固定的3个,也可能是8个 10个!

 test1: ["a", "b", "c"],
 test2: ["red", "yellow", "blue"],

如图:

img

<div class="dialogBodyEl dial" id="content">
        <li v-for="(item1, index1) in test1">
          {{ item1 }}:
          <span v-for="(item2, index2) in test2">
            {{ item2 }}
            <el-input style="width: 100px" type="text" v-model="res1">span>
        li>
div>
 <el-button type="primary" @click="save()">保 存el-button>

<script>
export default {
  name: "ecDetailsPopout",
  data() {
    return {
      width: "40%",
    input: [],
      test1: ["a", "b", "c"],
      test2: ["red", "yellow", "blue"],
      res1: [],
      res: {
        a: { red: "8", yellow: "8", blue: "8" },
        b: { red: "8", yellow: "8", blue: "8" },
        c: { red: "8", yellow: "8", blue: "8" },
      },
    };
  },
  methods: {
    // clg
    save() {
      console.log(this.res);
      console.log(this.res1);
    },


};
script>

1.在input输入框中输入任意值,所有的input全都会显示,如何给每个input 不同的v-model?
解答:input 的 v-model 绑定的是同一个值(res1),当然一处发生变化其他都发生变化
解决方法: 使每一个input都绑定到遍历对象上,对应的值,如楼上

<el-input style="width: 100px" type="text" v-model="res[item1][item2]"></el-input
            >
```html

2.提交保存的时候,怎么样才能输出下方res这样的对象集合?
解答: 问题1也已经实现了input 对 res的键值绑定,修改后,直接点击保存,res的值就会 发生改变

3.test1,test2 数组的值,不是固定的3个,也可能是8个 10个!
解答: test1,test2 不是固定,表明res 也不是固定,所有需在 界面渲染之前,根据  test1,test2 首先生成 res的数据结构

```javascript
new Vue({
            el: "#app",
            data() {
                return {
                    width: "40%",
                    input: [],
                    test1: ["a", "b", "c"],
                    test2: ["red", "yellow", "blue"],
                    res: null,
                };
            },
            methods: {
                save() {
                    console.log(this.res);
                },
            },
            created() {
                let temp = {}
                this.test1.forEach(item1 => {
                    temp[item1] = {}
                    this.test2.forEach(item2 => {
                        temp[item1][item2] = ""
                    });
                });
                this.res = temp
            }
        });


那你需要一个数组对象形式
test1:[{val:"a",value:"a"}] 然后 for循环 v-model="item.value"