V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
juventusryp
V2EX  ›  问与答

vue 中嵌套循环 input 如何绑定 v-model 的问题

  •  
  •   juventusryp · 2022-02-28 00:34:35 +08:00 · 1299 次点击
    这是一个创建于 1037 天前的主题,其中的信息可能已经有所发展或是发生改变。

    大致业务场景

    • 后台返回需要提交的一份单据的大单数>单数>小单数(例如“大单 1”下面包含“单 1”和“单 2”,每个“单”下面又包含“小单 1”,“小单 2”,“小单 3”)
    • 上面的大单、单、小单都是动态的,由后台返回,前端需要根据“小单数”的数量动态循环出对应的 input 并可输入数量向后台发送

    目前遇到的问题

    • 我采用的嵌套循环,即使用三个 v-for 把大单、单、小单三个循环出来,但是最终的 input 的 v-model 绑定上出现问题,无法正确拿到其值
    • 也就是下面代码中 el-input 中的 v-model 该如何写可以正确拿到每个小单里面的值?

    相关示例代码

    <el-form
      ref="dataForm"
      :model="Data"
      label-position="left"
      label-width="90px"
    >
      <el-form-item
         v-for="(item, index) in dan"
         :key="index"
         :label="item['标签']"
       >
         <p
            v-for="(t, x) in item['单数']"
            :key="'ds' + x"
          >
            单{{ t }}
            <el-input
               v-for="(i, k) in item['小单数']"
               :key="k"
               v-model=""
               "
            />
          </p>
       </el-form-item>
    </el-form>
    
    export default {
    
    name: 'App',
       data() {
        return {
           dan {
              1: {
                 '标签': ‘大单 1’,
                 '单数': 2,
                 '小单数': 3
                 },
              2: {
                 '标签': ‘大单 2’,
                 '单数': 3,
                 '小单数': 5
                 }
                }
            }
        }
    }
    
    
    9 条回复    2022-02-28 10:31:38 +08:00
    chengxy
        1
    chengxy  
       2022-02-28 02:28:03 +08:00
    可以参考各种 form render 的实现方式
    MacDows
        2
    MacDows  
       2022-02-28 02:37:44 +08:00 via Android
    遇到了类似的问题
    https://v2ex.com/t/832529#reply9
    我最后是把这些嵌套变成一个列表,加一个 Level 值标记层数
    然后就好多了,vue 新手也能写了
    要不然循环嵌套会很复杂
    这肯定不是最优方案,抛砖引玉,欢迎大佬指点
    murmur
        3
    murmur  
       2022-02-28 07:47:52 +08:00
    vmodel 是可以写变量的,提前生成一个数组或者 object
    murmur
        4
    murmur  
       2022-02-28 07:48:37 +08:00
    拿不到数据大概率是你绑定的变量没有提前生成好,不行就$set 一波,反正响应式得建立起来
    nitmali
        5
    nitmali  
       2022-02-28 08:09:06 +08:00
    多半是没有响应,要么$set ,要么 :value @change
    cxe2v
        6
    cxe2v  
       2022-02-28 09:59:32 +08:00
    <el-input
    v-for="(i, k) in item['小单数']"
    :key="k"
    v-model=""
    "
    />


    你这里为什么是 in item['小单数']",应该是 in t['小单数']吧
    konakona
        7
    konakona  
       2022-02-28 10:29:00 +08:00
    v-for 可以拼接。

    参考:
    <el-input v-model="form.package_goods[scope.$index].quantity" clearable placeholder=""></el-input>
    konakona
        8
    konakona  
       2022-02-28 10:29:12 +08:00
    打顺手了,是 v-model 可以拼接。
    konakona
        9
    konakona  
       2022-02-28 10:31:38 +08:00
    像你使用 v-for 循环来拼接 v-model 可以直接用 v-for 绑定的值,你的是第一层 el-form-item 的 v-for 里的 item ,第一层的 el-input v-model 可以是:v-model="item.字段名称" 。第二层的 v-for 的是 t ,v-model 可以是:v-model="t.字段名称",第三层如此类推。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1018 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 20:11 · PVG 04:11 · LAX 12:11 · JFK 15:11
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.