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

Question

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

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

            <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>

Answer 1

<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 就行。
同时对通过 answerKeys 对 answerList 进行处理，获得目标格式的 answerList。

Answer 2

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>

Answer 3

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

<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

Answer 4

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