Vue3模式下,运行至百度小程序,点击按钮切换选中项
- 发布:2021-12-29 12:55
- 更新:2022-01-04 18:05
- 阅读:1771
产品分类: uniapp/小程序/百度
PC开发环境操作系统: Mac
PC开发环境操作系统版本号: 11.0.1 (20B50)
HBuilderX类型: 正式
HBuilderX版本号: 3.3.4
第三方开发者工具版本号: 3.46.1
基础库版本号: 3.380.6
项目创建方式: HBuilderX
操作步骤:
预期结果:
仅选中项高亮
仅选中项高亮
实际结果:
点击后选中项高亮,之前的选中项也是高亮
点击后选中项高亮,之前的选中项也是高亮
bug描述:
Vue3模式下,运行至百度小程序,切换选中项,控制台报错TypeError: t.hasOwnProperty is not a function
Vue2模式下,未报错
<template>
<view class="list">
<view v-for="item in dataList" :key="item.id" @click="changeTown(item)" class="cell"
:class="{'cell_on' : selectedId === item.id}">
{{item.name}}
</view>
</view>
</template>
<script>
export default {
data() {
return {
dataList: [],
selectedId: 1
}
},
// #ifdef MP-BAIDU
onInit() {
},
// #endif
onLoad() {
for (var i = 1; i < 10; i++) {
this.dataList.push({
id: i,
name: '项目' + i
})
}
},
methods: {
changeTown(item) {
this.selectedId = item.id;
}
}
}
</script>
<style>
.list {
display: flex;
flex-wrap: wrap;
}
.cell {
flex: none;
border: 1px solid #999999;
border-radius: 4px;
margin: 10px 10px;
width: 50px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
}
.cell_on {
color: #FF7B07;
}
</style>