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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

› Vue.js

这是一个创建于 978 天前的主题，其中的信息可能已经有所发展或是发生改变。

<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 中），但是后面不知道该怎么写了

4 条回复

shintendo

2022-03-22 13:25:45 +08:00

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

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

3. 不要用循环 index 作为 key ，尤其你这种非纯展示的情景

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

2022-03-22 15:02:32 +08:00

tExamInfo[index]['题目数'][x]['题目信息'][k]

juventusryp

2022-03-25 11:27:17 +08:00

特来感谢回复的朋友，使用 2L 的方法解决，再次感谢