为什么在list-view 中使用动态绑定class会导致出错

C-Chicken

为什么在list-view 中使用动态绑定class会导致出错，报错的内容为一连串的    [ERROR] Bind cell data error.

页面代码如下 ：

1.   <list-view id="listView" bounces={false}>
   
2.                     <cell>
   
3.                         <view class={ (this.data.selectIndex==index ? 'active' : '' ) + ' width-100p height-44 flex-h flex-center' }>
   
4.                             <view v-if="this.data.selectIndex==index" class="icon"></view>
   
5.                             <text class="">{item.name}</text>
   
6.                         </view>
   
7.                     </cell>
   
8.                     <list-footer>
   
9.                         <text>加载中</text>
   
10.                     </list-footer>
    
11.                 </list-view>

复制代码

但是当我把动态绑定的class 代码给删去了，就可以出现想要的内容，没有报错
selectIndex 为在 data 中声明，默认为0

C-Chicken

测试发现， 引起这个报错的问题在于 index

如果吧index 变成固定数值，则不会报错，例如
class={ (this.data.selectIndex == 2 ? 'active' : '' ) + ' width-100p height-44 flex-h flex-center' }

C-Chicken

不过 index 这个值 在text 里面 显示出来又是正常的，所以有点搞不懂，到底是怎么回事

WX远航

这个似乎是this.data.selectIndex造成的，说是listView是原生组件，没有dom结构，无法读取this，你把this.data.selectIndex改成固定值试试

技术咨询-F

WX远航 发表于 2021-3-5 10:06
这个似乎是this.data.selectIndex造成的，说是listView是原生组件，没有dom结构，无法读取this，你把this.d ...

是这个原因

C-Chicken

那 如果要实现 选中效果不是要兜个大圈子？

京东不死鸟

技术支持-F 发表于 2021-3-5 12:08
是这个原因

this.dataList[this.activeIndex].class = 'image-layer'
// var item = {}
// for (var k in this.dataList[this.activeIndex]) {
//         item[k] = this.dataList[this.activeIndex][k]
// }
$('#yxyx-list').update({
        index: this.activeIndex, item: item
})
const index = e.index
this.activeIndex = index
this.currentOpt = this.dataList[index]
this.currentOpt.class = 'image-layer checked'
this.showOpt = true
$('#yxyx-list').update({
        index: index, item: this.dataList[index]
})
添加的checked生效了，去掉checked不生效，一直是checked状态，求解。

sxgsw3

《教育培训》云应用前后端全部免费开源啦！【新源码】
https://community.apicloud.com/bbs/thread-170438-1-1.html

前后端源码开源，可以让你快速了解AVM开发。