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

Question

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

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"],

如图：

<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"></el-input
            >个
          </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>

• <input type="checkbox" disabled="" />

Answer 1

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
            }
        });