uniapp vue 多个picker 用同一个数组和@change事件的bindPickerChange方法，设置不同值和获取不同值的实现方法

Question

uniapp vue 多个picker 用同一个数组和@change事件的bindPickerChange方法，设置不同值和获取不同值的实现方法

Answer 1

【以下回答由 GPT 生成】

解决方案

在uniapp的vue项目中，如果想要使用同一个数组和@change事件的bindPickerChange方法来设置和获取多个picker的不同值，可以通过以下步骤来实现。

1. 在data数据中定义一个名为pickerValues的数组，该数组用于存储每个picker的值。

data() {
  return {
    pickerValues: [] // 用于存储每个picker的值
  }
}

1. 在模板中使用v-for循环来渲染多个picker组件，并绑定同一个pickerValues数组作为v-model。

<template>
  <view>
    <picker v-for="(value, index) in pickerValues" :key="index" :value="value" mode="selector" @change="bindPickerChange(index)">
      <!-- 其他picker的相关配置 -->
    </picker>
  </view>
</template>

1. 在methods中定义一个名为bindPickerChange的方法，用于设置和获取每个picker对应的值。

methods: {
  bindPickerChange(index) {
    // 修改pickerValues数组中对应位置的值
    this.pickerValues.splice(index, 1, newValue);
  }
}

通过上述步骤，我们就可以实现在uniapp的vue项目中使用同一个数组和@change事件的bindPickerChange方法来设置和获取多个picker的不同值。每个picker组件都绑定了对应位置的数组元素，修改其中一个picker的值不会影响到其他的picker。

请注意，newValue表示新选择的值，你可以根据自己的需求在bindPickerChange方法中解析和处理该值，具体实现根据你的业务逻辑进行调整。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^