小石头oO
小石头oO
  • 发布:2019-05-20 11:58
  • 更新:2020-01-07 16:42
  • 阅读:4537

picker 动态渲染时,不能更新所选项

分类:uni-app

项目需要动态渲染表单项目,在渲染下拉选择时遇到该问题

由于下拉菜单的数量、内容是未知的,所以picker中的value、range、以及显示内容我把它放在了optionIndexes、optionLists、optionShowItems中,通过optionShowItems[id]的方式关联

问题:
触发下拉事件后optionShowItems 内的内容发生了变化,但是页面上还是显示的默认值

预期:
触发下拉事件后,页面显示内容需要根据具体选择的内容进行变化

环境:
HBuilder X - 1.9.4.20190426
Chrome 版本 74.0.3729.157(正式版本) (64 位)
macOS 10.14.4 (18E226)

重现代码:

<template>  
    <view>  
        <cu-custom isBack=true>  
            <block slot="content">热门问题</block>  
        </cu-custom>  
        <view name="表单">  
            <form class="padding-top">  
                <view v-for="(item,index) in formList" :key="index">  
                    <view name="单选" class="cu-form-group margin-top" >  
                        <view class="title">{{item.show_name}}</view>  
                        <picker @change="PickerChange" :id="item.key" :value="optionIndexes[item.key]" range-key="key" :range="optionLists[item.key]">  
                            <view class="picker">  
                                <!-- {{lindex > -1 ? optionLists[item.key][lindex].key : ''==item.notice_val?'请选择'+item.show_name:item.notice_val}} -->  
                                {{optionShowItems[item.key]}}  
                            </view>  
                        </picker>  
                    </view>  
                </view>  
                <view name="提交按钮" class="padding">  
                    <button class="cu-btn bg-herored radius margin block" @click="AddOrder">提交</button>  
                </view>  
            </form>  
        </view>  
    </view>  
</template>  

<script>  
    export default{  
        data(){  
            return{  
                formList:[  
                    {"key": "4a1fde","type": "select","show_name": "下拉列表1","option_val": "[{\"key\":\"\\u9009\\u9879\\u53c2\\u65701\",\"val\":1},{\"key\":\"\\u9009\\u9879\\u53c2\\u65702\",\"val\":2},{\"key\":\"\\u9009\\u9879\\u53c2\\u65703\",\"val\":3}]"},  
                    {"key": "4a1fd1","type": "select","show_name": "下拉列表2","option_val": "[{\"key\":\"\\u9009\\u9879\\u53c2\\u65701\",\"val\":1},{\"key\":\"\\u9009\\u9879\\u53c2\\u65702\",\"val\":2},{\"key\":\"\\u9009\\u9879\\u53c2\\u65703\",\"val\":3}]"},  
                ],  
                fromValues:{},  
                optionIndexes:{},  
                optionLists:{},  
                optionShowItems:{},// 这里的值修改为 {"4a1fde":'', "4a1fd1":''} 时 就能正常渲染和选择了  

            }  
        },  
        onLoad() {  
            for(let item in this.formList){  
                this.fromValues[this.formList[item].key] = ''  
                if('select'==this.formList[item].type){  
                    this.optionShowItems[this.formList[item].key] = '请选择'  
                    this.optionLists[this.formList[item].key] = JSON.parse(this.formList[item].option_val)  
                }  
            };  
            console.log('optionShowItems',this.optionShowItems)  
        },  
        methods:{  
            PickerChange(e) {  
                let currentId = e.currentTarget.id  
                this.fromValues[currentId] = e.detail.value  
                this.optionShowItems[currentId] = this.optionLists[currentId][e.detail.value].key  
                console.log('optionShowItems',this.optionShowItems)  
            },  
            AddOrder(e){  
                console.log('fromValues',this.fromValues)  
            },  
        }  
    }  

</script>  

<style>  

</style>
2019-05-20 11:58 负责人:无 分享
已邀请:
1***@qq.com

1***@qq.com

我也遇到了类似问题,要根据后台数据动态创建表单,包括时间和下拉等,picker显示需要变量,但又不能写死,所以我在每条数据中直接追加属性,作为要显示的值,在change事件中可以改变数据的属性值,但是显示的值却没有变化,,好吧,就这意思,和你的问题差不多,请问大佬,问题解决了吗

天目mvc

天目mvc

此问题有没有有效解决

天目mvc

天目mvc

this.field[i].selected=e.detail.value;
for (let ii = 0; ii < item.value.length; ii++) {
Vue.set(this.field[i].value, ii, item.value[ii]) ;//重新设置。真是。。。。。
}

熊哥

熊哥

//可以通过另一种方式来动态绑定  
<template>  
    <view>  
        <view class="uni-list form_list_box">  
            <view class="uni-list-cell" v-for="(item, idx) in singal_options" :key="idx">  
                <view class="uni-list-cell-left form_list_cell_left">{{ item.label }}</view>  
                <view class="uni-list-cell-db form_list_cell_db">  
                    <picker @change="pickerChange($event, idx)" :id="item.key" :value="optionIndexes[item.key]" :range="item.options" range-key="name">  
                        <view class="uni-input">{{ item.options[optionIndexes[item.key]].name }}</view>  
                    </picker>  
                </view>  
            </view>  
        </view>  
    </view>  
</template>  
<script>  
export default {  
    data() {  
        return {  
            singal_options: [  
                {  
                    key: 'v_signal',  
                    label: '视频信号',  
                    options: [{ name: 'SDI', val: 'sdi' }, { name: 'HDMI', val: 'hdmi' }]  
                },  
                {  
                    key: 'v_format',  
                    label: '视频格式',  
                    options: [{ name: '1080P60', val: '1080p60' }, { name: '720P30', val: '720p30' }]  
                },  
                {  
                    key: 'a_signal',  
                    label: '音频信号',  
                    options: [{ name: 'SDI', val: 'sdi' }, { name: 'HDMI', val: 'hdmi' }]  
                }  
            ],  
            //默认  
            optionIndexes: {  
                v_signal: 0,  
                v_format:0,  
                a_signal: 0  
                        },  
            signalForm: {  
                v_signal: '',  
                v_format: '',  
                a_signal: ''  
            }  
        };  
    },  
    onLoad() {  
        this.getSingal();  
    },  
    methods: {  
        getSingal() {  
            this.signalForm = {  
                v_signal: 'sdi',  
                v_format: '720p30',  
                a_signal: 'hdmi'  
            };  
            //将对象的key压入数组  
            let k = Object.keys(this.signalForm);  
            this.getOptionIndexes(k);  
        },  
        getOptionIndexes(k) {  
            let vm = this;  
            this.singal_options.find((item, i) => {  
                if (item.key == k[i]) {  
                    item.options.find((j, idx) => {  
                        if (j.val == vm.signalForm[item.key]) {  
                            vm.optionIndexes[item.key] = idx;  
                        }  
                    });  
                }  
            });  
        },  
        pickerChange(e, idx) {  
            let currentId = e.currentTarget.id;  
            this.optionIndexes[currentId] = e.detail.value;  
        }  
    }  
};  
</script>  

<style scoped lang="scss">  
.uni-common-pl {  
    color: #fff;  
}  
</style>  

该问题目前已经被锁定, 无法添加新回复