我需要动态增减表单项，其中表单项中有picker选择器，并将从后台获取的数据全都渲染进表单，但是点击我的picker选择器发生改变后，发生的改变会到我下一个渲染的picker选择器上

Question

uniapp中，我需要动态增减表单项，其中表单项中有picker选择器，并将从后台获取的数据全都渲染进表单，但是点击我的picker选择器发生改变后，发生的改变会到我下一个渲染的picker选择器上，这是怎么回事？

Answer 1

【以下回答由 GPT 生成】

对于这个问题，你可以遵循以下步骤来解决：

1. 确定数据源：首先，你需要确定从后台获取的数据源，以便在表单项中渲染选择器。这可以是一个数组或一个对象数组，其中每个对象包含一个或多个要在选择器中显示的属性。

2. 动态渲染表单项：在你的组件中，你可以使用v-for指令来动态渲染表单项，并为每个表单项绑定对应的数据源。例如：

<template>
  <div>
    <div v-for="(item, index) in formItems" :key="index">
      <picker :data="item.dataSource" @change="handleChange(index)"></picker>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formItems: [
        { dataSource: [] }, // 表单项1的数据源
        { dataSource: [] }, // 表单项2的数据源
        // ...
      ]
    }
  },
  methods: {
    handleChange(index) {
      // 在这里处理选择器的改变事件
    }
  }
}
</script>

在上面的代码中，我们使用v-for指令根据formItems数组的长度动态渲染表单项。每个表单项中都包含一个选择器picker，它的数据源使用表单项自己的数据源item.dataSource。

1. 处理选择器的改变事件：为了避免点击一个选择器改变其他选择器的值，你可以为每个选择器绑定一个对应的改变事件，并在事件处理程序中更新对应的数据源。你可以使用选择器的@change事件来监听选择器的改变事件，并传递当前表单项的索引。例如：

<template>
  <div>
    <div v-for="(item, index) in formItems" :key="index">
      <picker :data="item.dataSource" @change="handleChange(index)"></picker>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      formItems: [
        { dataSource: [] }, // 表单项1的数据源
        { dataSource: [] }, // 表单项2的数据源
        // ...
      ]
    }
  },
  methods: {
    handleChange(index) {
      // 在这里处理选择器的改变事件
      const selectedValue = // 获取选择的值
      this.formItems[index].selectedValue = selectedValue // 更新对应的数据源
    }
  }
}
</script>

在上面的代码中，我们在handleChange方法中获取了选择器的选择值，并将其存储到对应的表单项的数据源this.formItems[index].selectedValue中。

使用以上的方法，你应该能够在渲染表单项时避免点击一个选择器改变其他选择器的值。希望能对你有所帮助！如果还有其他问题，请随时提问。

【相关推荐】

• 这个问题的回答你可以参考下: https://ask.csdn.net/questions/7495613
• 你也可以参考下这篇文章：1.uniapp的时间选择器picker结束时间大于起始时间2.编译到支付宝小程序后时间格式分割由-变为/的问题3.前端时间传参比实际选择时间+1天

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