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

2022-03-22 12:54:29 +08:00
 juventusryp
<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>

代码说明:

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

问题:

1655 次点击
所在节点    Vue.js
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 的方法解决,再次感谢

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/842081

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX