Vue-native：动态创建的 touchable-opacity 一开始都被按下

Posted 2023-02-22

【中文标题】Vue-native：动态创建的 touchable-opacity 一开始都被按下

【英文标题】：Vue-native: Dynamically created touchable-opacity are all pressed at the beginning

【发布时间】：2021-01-12 20:56:24

【问题描述】：

当我使用 v-for 循环创建可触摸不透明度或按钮时，即使我没有触摸任何按钮，也会调用所有按钮的按下功能。但是普通按钮使用和handler一样的功能是没有问题的。

<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 的内容。有人可以帮忙吗？

【参考方案1】：

我也面临同样的问题......

更新：我对该主题进行了更深入的研究，结果发现这是原生基础中的一个已知问题。 复选框在本机反应中是可触摸的不透明度，按钮也是按某种顺序组合视图，这就是为什么在这两种情况下都有问题。

查看 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]

希望对解决您的问题有所帮助。

【讨论】：

这并不能真正回答问题。如果您有其他问题，可以点击 提问。一旦你有足够的reputation，你也可以add a bounty 来引起对这个问题的更多关注。 - From Review

非常感谢！你不知道我在这个问题上挣扎了多少。