js怎样为数组里面的值重新赋值?

怎样给每个备选答案的字符串动态加上ABCD...呢?如果有更多选项呢?是不是为数组里面的值重新赋值?但我不知道怎么写?
目前得到的结果里面没有ABCD

answerList: Array(4)
0: "2"
1: "11"
2: "100"
3: "5"
length: 4

image.png

image.png
image.png

            <el-form-item label="一、单选题:">
                <ol>
                    <li v-for="(item,index) in ruleForm.topics.singleChoiceData" :key="index">
                        <p>题目:{{item.question}}</p>
                        <el-checkbox-group
                                v-model="item.answerList"
                                :min="1"
                                :max="2">
                            <el-checkbox v-for="value in item.answerList" :label="value" :key="value">A.{{value}}</el-checkbox>
                        </el-checkbox-group>
                        <p>备选答案:{{item.answerList}}</p>
                        <p>答案:{{item.answer}}</p>
                    </li>
                </ol>
            </el-form-item>
阅读 8.6k
4 个回答
<p>备选答案:{{getAnswer(item.answerList)}}</p>
data: () => ({
    ...,
    answerKeys: ["A", "B", "C", "D"]
    ...
}),
methods: {
    getAnswer(list) {
        return this.answerKeys.map((d, idx) => {
            return `${d}:${list[idx]}`
        })
    }
}
...

大致代码如上,用 data 管理答案的 key(ABCD),如果有更多的,直接改变这个 data 就行。
同时对通过 answerKeysanswerList 进行处理,获得目标格式的 answerList

vue filters 添加一个过滤器函数

filters:{
    filterFun(val,index){
      let arr = ['A','B','C','D','E']
      return `${arr[index]}.${val}`
    }
  },

template中修改一下

  <el-checkbox v-for="(value,index) in item.answerList" :label="value" :key="value">{{value | filterFun(index)}}</el-checkbox>

JS的方式当然可以实现,不过也许可以试试CSS计数器:

image.png

<div class="container">
  <div class="option">1</div>
  <div class="option">11</div>
  <div class="option">21</div>
  <div class="option">31</div>
</div>
.container {
  counter-reset: option 0;
}

.option::before {
  content: counter(option, upper-alpha)". ";
  counter-increment: option 1;
}

另一个思路是使用ol li 设置list-style-type

我怎么记得前两天答过这个问题?用 <ol> <li>list-style-type

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题