为什么我slider绑定索引绑定的索引不对？

Question

第一张是wxml,第二张是js里的方法，打印出来的选项索引是undefined

Answer 1

引自免费微信小程序：皆我百晓生

首先，从你的代码和描述来看，问题可能在于你绑定slider的data-index和data-optionIndex属性的方式。你在wxml中使用了双大括号{{}}来绑定这些值，但在实际代码中，你试图通过e.currentTarget.dataset.index和e.currentTarget.dataset.optionId来获取这些值。在Vue中，这种双大括号绑定方式实际上是在运行时动态计算并更新DOM的过程，而不是直接设置DOM属性的方式。因此，你可能无法直接通过dataset属性获取到这些值。

一种可能的解决方案是尝试将索引值作为参数传递给事件处理函数。你可以在<slider>标签上添加绑定事件时传入相应的参数，然后在事件处理函数中接收这些参数。这样可以避免依赖dataset属性来获取索引值。这里是一种可能的修改方式：

图1中的wxml部分修改为：

<slider wx:if="{{item.isother == 3}}" value="{{item.sliderValue}}" bindchange="handleRatingChange({{index}}, {{optionIndex}}, $event)" data-index="{{index}}" min="0" max="10" step="1" show-value />

然后在图2的js部分修改handleRatingChange函数：

handleRatingChange(index, optionIndex, e) {
  const newValue = e.detail.value; //获取新的滑动条值
  console.log("当前问题索引", index);
  console.log("当前选项索引", optionIndex);
  console.log("当前滑动条的值", newValue);
}

这样，当滑动条的值改变时，会触发handleRatingChange函数，并传入正确的索引值。这种方式可以避免依赖dataset属性来获取索引值，可能解决你遇到的问题。希望这个解决方案能对你有所帮助！