flydawn 2022-10-10 15:38 采纳率: 33.3%
浏览 175
已结题

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"></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="" />
  • 写回答

2条回答 默认 最新

  • China_ZZJ_GOGOGO 2022-10-10 17:16
    关注

    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
                }
            });
    
    
    
    
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(1条)

报告相同问题?

问题事件

  • 系统已结题 10月20日
  • 已采纳回答 10月12日
  • 创建了问题 10月10日

悬赏问题

  • ¥15 workstation加载centos进入emergency模式,查看日志报警如图,怎样解决呢?
  • ¥50 如何用单纯形法寻优不能精准找不到给定的参数,并联机构误差识别,给定误差有7个?matlab
  • ¥15 workstation加载centos进入emergency模式,查看日志报警如图,没有XFS,怎样解决呢?
  • ¥20 求各位解释一道区间DP
  • ¥15 应用商店如何检测在架应用内容是否违规?
  • ¥15 Ubuntu系统配置PX4
  • ¥50 nw.js调用activex
  • ¥15 数据库获取信息反馈出错,直接查询了ref字段并且还使用了User文档的_id而不是自己的
  • ¥15 将安全信息用到以下对象时发生以下错误:c:dumpstack.log.tmp 另一个程序正在使用此文件,因此无法访问
  • ¥15 速度位置规划实现精确定位的问题