uniapp 循环遍历picker绑定值问题

最新推荐文章于 2024-09-02 14:59:55 发布

原创最新推荐文章于 2024-09-02 14:59:55 发布 · 1.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端

uniapp 专栏收录该内容

3 篇文章

订阅专栏

本文介绍如何使用uniapp的uni-forms及uni-datatime-picker插件，根据后台返回的数据动态渲染picker、radio和textarea等表单控件。文中通过具体代码示例展示了动态表单的实现过程。

需求背景：根据后台返回的数据动态渲染picker，radio，textarea三种类型表单控件。

下面用到了uniapp的uni-forms、uni-datatime-picker拓展插件，有需要的小伙伴可以去uniapp官网下载。

<uni-forms :modelValue="formData" ref="form">
    <view class="flex-column" v-for="(item, i) in formData.questionList" :key="i">
    <picker
        v-if="item.questionType == 'select'"
        @change="PickerChange(i, $event)"
        :value="selectIndex[i]"
        range-key="optionText"
        :range="item.optionList"
    >
    <view class="uni-input">
    {{item.optionList[selectIndex[i]]? item.optionList[selectIndex[i]].optionText: ""}}
    <i class="iconkechengjiaoxuecopy49beifen2x iconfont link" />
    </view>
</picker>
export default {
  data() {
    return {
      formData: {},
      selectIndex: [],
    };
  },
  methods:{
    //这里我是从后台拿到的数据
    this.$request.get(`/appraise/1504393143817334785`).then((res) => {
        this.formData = res;
        this.selectIndex.push();
    });
    PickerChange(i, e) {
      this.$set(this.selectIndex, i, e.target.value);
    },
  }
}