V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
juventusryp
V2EX  ›  Vue.js

还是请教嵌套循环 input 如何绑定 v-model 的问题

  •  
  •   juventusryp · 2022-03-22 12:54:29 +08:00 · 1428 次点击
    这是一个创建于 738 天前的主题,其中的信息可能已经有所发展或是发生改变。
    <template>
      <div>
        <el-form
          ref="dataForm"
          class="form-container"
          label-position="top"
        >
          <div
            v-for="(item, index) in tExamInfo"
            :key="index"
          >
            <el-form-item
              :label="item['标签']"
            >
              <div
                v-for="(t, x) in item['题目数']"
                :key="x"
              >
                {{ item['标签'] }}{{ t }}
                <el-input
                  v-for="(i, k) in item['题目信息']"
                  :key="k"
                  class="test-input"
                  :placeholder="i"
                  @blur="test()"
                />
              </div>
            </el-form-item>
          </div>
        </el-form>
      </div>
    </template>
    
    <script>
    
    export default {
      name: 'App',
      data() {
        return {
          tExamInfo: [
            {
              '标签': '简答题',
              '得分点': 3,
              '题目数': 3
            },
            {
              '标签': '辨析题',
              '得分点': 2,
              '题目数': 2
            }
          ]
        }
      },
      created() {
        this.getList()
      },
      methods: {
        getList() {
          let b = {}
          const singleTopic = []
          this.tExamInfo.forEach((item, index) => {
            for (let i = 0; i < item['题目数']; i++) {
              b[item['标签'] + (i + 1)] = new Array(item['得分点']).fill('')
              singleTopic.push(b)
              b = {}
            }
            this.tExamInfo['题目信息'] = singleTopic
          })
        }
      }
    }
    
    </script>
    
    

    代码说明:

    • 后台返回 tExamInfo ,内容为动态

    • 前端需要根据对应信息生成一个下图的表单

    https://i.imgur.com/Bl4Nn4o.png

    问题:

    • <el-input>不知道该怎么写,可以根据得分点生成对应数量的 input 同时正确绑定 v-model

    • 目前想法是根据每道题的得分点生成相应的空数组去绑定 v-model (方法在 getList 中),但是后面不知道该怎么写了

    shintendo
        1
    shintendo  
       2022-03-22 13:25:45 +08:00   ❤️ 1
    1. 循环和 v-model 的配合问题,本质在于 v-model 需要对变量进行写入,而循环(item, index) in list 中的 item 是个临时变量,对它的写入不会改变原数组。解决方法通常是用 list[index]而非 item 进行绑定

    2. 搞不清楚的时候记得 v-model 只是 v-bind+@input 的语法糖就行了,拆开来写总知道怎么写了

    3. 不要用循环 index 作为 key ,尤其你这种非纯展示的情景
    liyang5945
        2
    liyang5945  
       2022-03-22 13:45:19 +08:00
    <template>
    <div>
    <el-form
    ref="dataForm"
    class="form-container"
    label-position="top"
    >
    <div
    v-for="(item, index) in tExamInfo"
    :key="index"
    >
    <el-form-item
    :label="item['标签']"
    >
    <div
    v-for="(questionItem, x) in item['题目列表']"
    :key="x"
    >
    <span>
    {{questionItem.questionTitle}}
    </span>
    <el-input
    v-for="pointItem in questionItem.pointList"
    v-model="pointItem.pointAnswerText"
    :placeholder="pointItem.pointTitle"
    >

    </el-input>
    </div>
    </el-form-item>
    </div>
    </el-form>
    </div>
    </template>

    <script>

    export default {
    name: 'App',
    data() {
    return {
    tExamInfo: [
    {
    '标签': '简答题',
    '得分点': 3,
    '题目数': 3
    },
    {
    '标签': '辨析题',
    '得分点': 2,
    '题目数': 2
    }
    ]
    }
    },
    created() {
    this.getList()
    },
    methods: {
    getList() {
    this.tExamInfo.forEach((item, index) => {
    let questionLength = item['题目数']
    let questionPointLength = item['得分点']
    let questionList = []
    for (let i = 0; i <questionLength; i++) {
    let questionItem = {}
    questionItem['questionTitle'] = `${item['标签']}${i+1}`
    questionItem['pointList'] = []
    for(let j=0;j<questionPointLength;j++){
    questionItem['pointList'].push({
    pointTitle:`得分点${j+1}`,
    pointAnswerText:''
    })
    }
    questionList.push(questionItem)
    }
    this.$set(item,'题目列表',questionList)
    })
    }
    }
    }

    </script>
    雷锋同志来了
    cluulzz
        3
    cluulzz  
       2022-03-22 15:02:32 +08:00
    tExamInfo[index]['题目数'][x]['题目信息'][k]
    juventusryp
        4
    juventusryp  
    OP
       2022-03-25 11:27:17 +08:00
    特来感谢回复的朋友,使用 2L 的方法解决,再次感谢
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   4388 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 27ms · UTC 10:06 · PVG 18:06 · LAX 03:06 · JFK 06:06
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.