项目需要动态渲染表单项目,在渲染下拉选择时遇到该问题
由于下拉菜单的数量、内容是未知的,所以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>
f***@foxmail.com
请问你这个问题解决了吗
2019-11-07 16:46
1***@qq.com
回复 f***@foxmail.com: 用$set()给对象添加属性,视图层可以渲染
2019-11-26 15:22