Vant Weapp

小小程序员——Tracy

于 2024-02-28 14:56:28 发布

阅读量425

点赞数 2

分类专栏：小程序文章标签： webapp

本文链接：https://blog.csdn.net/weixin_48702807/article/details/136346378

版权

小程序专栏收录该内容

2 篇文章 0 订阅

订阅专栏

本文详细描述了在使用VantWeapp开发小程序时，如何处理van-radioname组件无法接受对象的问题，以及如何在mpx中实现多层嵌套for循环。特别关注onChange事件的处理，包括针对radio-group中name为字符串的情况进行对象解析。

摘要由CSDN通过智能技术生成

Vant Weapp - 轻量、可靠的小程序 UI 组件库

van-radio name 是一个字符串，无法传对象的处理

以及 mpx 多层嵌套 for 循环处理

<view
        wx:for="{{questionList}}"
        wx:for-item="question" // item 重命名
        wx:for-index="questionIndex" // index 重命名
        wx:key="question"
      >
        <view wx:show="{{questionIndex + 1 === showIndex}}" class="hz-card">
          <text class="hz-question"
            >{{ questionIndex + 1 }}:{{ question.question }} ({{ question.type }}类问题)</text
          >
          <van-radio-group
            value="{{ answerList[questionIndex].answerItem }}"
            bind:change="onChange($event, questionIndex, question.type)"
            direction="horizontal"
          >
            <van-radio wx:for="{{question.options}}" wx:key="text" name='{{"score:" + item.score + ",text:" + item.text}}'
              >{{ item.text }} 
// name 给传一个类似对象的字符串
            </van-radio>
          </van-radio-group>
        </view>
      </view>

 onChange(event, index, type) {
        // vant-radio 中的 name 是字符串，传不了对象，这么处理事因为有的答案不同但是得分相同
        const selectData = event.detail // "score:1,text:蓝"
        this.answerList[index].answerItem = selectData
        let score = selectData.split(",")[0].split(":")[1]; // 把 "score:1,text:蓝" 中的 score 取出来
        this.answerList[index].score = parseInt(score)
        this.answerList[index].type = type
      },