一、业务背景:最近在开发小程序试题的顺序练习模块,在做单选题/判断题时,如果选完选项后当前题需要变成不可选的状态,如何选择错的话,试题下面会显示正确答案和解析,选择对的话就不显示答案或者解析,效果图如下:
二、以此为例,试题做完之后判断是否隐藏(disabled)和试题做对与否而对应的答案是否隐藏和展示(answerShow)的这两个属性是后台传过来是没有的,那怎么办?前台拿到后台试题集合时,JS中遍历该试题集合给每个试题对象新添加加上需要的属性,跟后台去添加相关属性方便的多,这里我把JS中添加后台返回数据中没有的但前台需要的属性,称之为临时性/暂时性属性,那JS中如何添加,关键代码展示如下:
A.方法中的代码
methods: {//每次都是根据试题ID一道一道的查,并把该试题放入试题集合optionList中进行显示//index为当前试题集合的下标wxGetQuestionById(id, index){wxGetQuestionById(id).then(res=>{//拿到该试题对象let getQuesIndetail = res.response;if(getQuesIndetail != null){//js中给该试题对象创建新属性(disabled:是否可选,默认是可选的,为true)getQuesIndetail.disabled = true;//js中给该试题对象创建新属性(answerShow:答案和解析是否显示,默认是不显示的,为false)getQuesIndetail.answerShow = false;}//把该试题对象赋值给对应下标试题集合中去this.optionList[index] = getQuesIndetail;//此方法主要使用主要解决赋值后页面值不能及时刷新的问题this.$set(this.optionList, index, this.optionList[index]);});},
}
B.标签代码:
答案 {{ items.questionObject.correct }} 本题解析
小导向:
1.disabled 和 answerShow 什么时候变成 false 或者 true,是根据操作时调取的方法进行判断决定,具体的逻辑代码此处不再展示。
2.通过页面创建临时性属性,这样省去在后台添加属性了,因为后台添加一个新属性,相当于返回的实体类里必须对应添加新字段,就比较麻烦。
3.此实例我是在Vue框架中进行实现的。