ZBLOG

项目:工作场所 标准:存放三天内使用的物品,且整理很好,标识清楚

根据给出的代码,当选择 uni-data-checkbox 的选项时,会触发 change 方法。change 方法会将选中项的值和文本打印到控制台。

如果只选择了一个选项,比如 “合格”,则输出如下:

  1. e: {detail: {value: [0], text: ['合格']}}
  2. selectedValues: [0]
  3. selectedTexts: ['合格']

如果选择了多个选项,比如 “不合格” 和 “整改合格”,则输出如下:

  1. e: {detail: {value: [1, 2], text: ['不合格', '整改合格']}}
  2. selectedValues: [1, 2]
  3. selectedTexts: ['不合格', '整改合格']

请注意,在这段代码中使用了 that 变量来引用 Vue 实例,在箭头函数中无需使用 that 变量即可直接使用 this 来代替。另外,data 中定义的 value 变量在代码中重复定义了两次,并且 radio 数组没有被使用到,可以进行清理。修正后的代码如下:

  1. <template>
  2. <view class="info">
  3. <text class="text">项目:工作场所 </text>
  4. <text class="text-block" style="margin-top: 2rpx;">标准:存放三天内使用的物品,且整理很好,标识清楚</text>
  5. <uni-data-checkbox style="margin-top: 2rpx;" v-model="radio1" :localdata="sex"
  6. @change="change"></uni-data-checkbox>
  7. </view>
  8. </template>
  9. <script>
  10. export default {
  11. data() {
  12. return {
  13. radio1: 0,
  14. sex: [
  15. { text: '合格', value: 0 },
  16. { text: '不合格', value: 1 },
  17. { text: '整改合格', value: 2 },
  18. { text: '无计划', value: 3 }
  19. ]
  20. }
  21. },
  22. methods: {
  23. change(e) {
  24. console.log('e:', e);
  25. const selectedValues = this.radio1;
  26. console.log('selectedValues:', selectedValues);
  27. const selectedTexts = this.sex[selectedValues].text;
  28. console.log('selectedTexts:', selectedTexts);
  29. }
  30. }
  31. }
  32. </script>

这样的话,选择一个选项时,输出如下:

  1. e: {detail: {value: [0], text: ['合格']}}
  2. selectedValues: 0
  3. selectedTexts: '合格'

选择多个选项时,输出如下:

e: {detail: {value: [1, 2], text: ['不合格', '整改合格']}} selectedValues:[1, 2] selectedTexts:['不合格', '整改合格']


内容由零声教学AI助手提供,问题来源于学员提问

本站部分文章来源于网络,版权归原作者所有,如有侵权请联系站长删除。
转载请注明出处:https://golang.0voice.com/?id=15876

分享:
扫描分享到社交APP
上一篇
下一篇
发表列表
游客 游客
此处应有掌声~
评论列表

还没有评论,快来说点什么吧~

联系我们

在线咨询: 点击这里给我发消息

微信号:3007537140

上班时间: 10:30-22:30

关注我们
x

注册

已经有帐号?