让他们获取同一个值显示在picker时，报提示不能值一样 循环多个picker

Question

uniapp vue 多个picker 用同一个数组和@change事件的bindPickerChange方法，让他们获取同一个值显示在picker时，报提示不能值一样 循环多个picker，但数组和@change事件的bindPickerChange方法都是同一个

Answer 1

根据你的描述，你希望多个Picker共享同一个数组，并且在选择某个值时，其他Picker也应该更新。

在Uni-app中，你可以使用@change事件来监听Picker的选择变化。@change事件在选择改变后触发，你可以在这个事件中更新你的数组。

以下是一个基本的示例：

<template>
  <view>
    <picker v-for="(item, index) in pickers" :key="index" :values="item.values" @change="bindPickerChange(index, $event)">
      <view v-for="value in item.values" :key="value">{{ value }}</view>
    </picker>
  </view>
</template>

<script>
export default {
  data() {
    return {
      pickers: [
        {
          values: ['A', 'B', 'C']
        },
        {
          values: ['D', 'E', 'F']
        },
        // 更多Picker...
      ]
    }
  },
  methods: {
    bindPickerChange(index, event) {
      // 更新pickers数组中的相应Picker的值
      this.pickers[index].values = event.detail;
    }
  }
}
</script>

在这个示例中，每个Picker的values都是pickers数组中的一个元素。当用户选择一个值时，这个值会被更新到对应的values数组中。然后，由于数组是共享的，所以其他Picker也会更新。

注意：由于Picker组件的限制，你不能直接设置Picker的值。你只能通过监听@change事件来间接地改变值。这就是为什么我们在bindPickerChange方法中直接更新了pickers[index].values的原因。