vue-native - Vue-native:动态创建的 touchable-opacity 一开始都被按下
问题描述
当我使用 v-for 循环创建可触摸不透明度或按钮时,即使我没有触摸任何按钮,也会调用所有按钮的按下功能。但是使用与处理程序相同的功能的普通按钮没有任何问题。
<view v-for="taskDay in buttons" :key="taskDay.id" class="task-day">
<touchable-opacity
v-for="task in taskDay.next"
:key="task.id"
:on-press="handleTouch(task.id)"
class="task">
</touchable-opacity>
</view>
methods: {
handleTouch: function(id) {
console.log(id);
}
},
互联网上没有太多关于 vue native 的内容。任何人都可以帮忙吗?
解决方案
我面临着完全相同的问题......
更新:我对该主题进行了更深入的研究,结果证明这是本地基础中的一个已知问题。复选框在本机反应中是可触摸的不透明度,按钮也是按某种顺序组合视图的,这就是为什么在这两种情况下都有问题的原因。
查看 github 中的原生基础问题: https ://github.com/GeekyAnts/NativeBase/issues/3038
但是,我可以找到一种解决方法。这不完全是一个复选框,我使用刻度图标来显示该项目已被选中,并且我从本机基础迭代了一个可触摸的不透明度。但是通过一些样式,您可以创建一个复选框,我相信。
<scroll-view
:content-container-style="{
contentContainer: {
paddingVertical: 20
}
}"
>
<touchable-opacity
v-for="(item, index) in dataArray"
:key="index"
:onPress="
() => {
checkItem(index)
}
"
>
<text>{{ item.time }} - {{ item.name }}</text>
<image
:style="{ height: 15, width: 15, marginLeft: 15 }"
:source="require('../../../assets/icons/done.png')"
v-if="item.checked"
/>
</touchable-opacity>
</scroll-view>
在 checkItem 方法中,我使用拼接并替换项目以保持反应性:
methods: {
checkItem(index) {
this.dataArray[index].checked = true
this.dataArray.splice(index, 1, this.dataArray[index])
}
},
我的 dataArray 是一个这样的数组:
[{id: 1, name: 'Name', checked: true}, {id: 2, name: 'Name', checked: false}]
我希望它有助于解决您的问题。
推荐阅读
- tfs - How to direct my release/deployment based on web.config file in TFS 2015
- python - 替代 Python For 循环以获得更快的结果
- python - 在虚拟窗口上使用 google-cloud-vision api 在时间范围内出现无效的 JWT 错误
- reactjs - 从单个文件导出的 Material UI v4 makeStyles 在刷新时不保留样式
- sql - Combining Dense_Rank() and Lag() in the same column
- javascript - 为什么我只能在首先检查它是否存在之后才能调用它?
- gradle - 如何将 Gradle 中的 srcPaths 设置为子目录集合中的特定子目录
- javascript - 在 external.js 文件中调用 php 变量
- numpy - 如何为每行搜索大于给定值的值数
- angular - 手动调用signingSilent时发生oidc-client帧错误