公告列表
公告列表
收藏
回答

动态渲染表单的时候点击某些事件会报错？

表单那输入的时候，或者打开弹窗的时候，在微信开发者工具中可以正常执行，但是运行到真机上就报错，报错内容：MiniProgramError

undefined is not an object (evaluating 'a[a.length - 1].currentTarget')

TypeError: undefined is not an object (evaluating 'a[a.length - 1].currentTarget')


使用了 vantweapp组件

<template>
	<page-meta :page-style="'overflow:'+(jiaShow?'hidden':'visible')"></page-meta>
	<view class="homes">
		<view>
			<van-cell-group v-if="Object.keys(fieldObj).length !== 0">
				<block v-for="(item,outerIndex) in fieldArray" :key="outerIndex">
					<template v-if="item.htmlElements==='输入框'">
						<view class="bomCol">
							<van-field required center :type="item.calendar_Type" :value="fieldObj[item.input]" :label="item.showName"
								@change="(data)=>change(data,item.input)" :placeholder="item.desc" />
						</view>
					</template>
					<template v-if="item.htmlElements==='文本域'">
						<view class="bomCol">


							<van-field :value="fieldObj[item.input]" :label="item.showName" type="textarea"
								:autosize="{ maxHeight: 50, minHeight: 40 }" center
								@change="(data)=>change(data,item.input)" :placeholder="item.desc" />
						</view>
					</template>
					<template v-if="item.htmlElements==='复选框'">
						<view class="view_checkbox bomCol">
							<view class="lef">{{item.showName}}</view>
							<view class="rig">
								<van-checkbox-group :value="fieldObj[item.input]"
									@change="(data)=>change(data,item.input)">
									<view style="margin-bottom: 10rpx;" v-for="(checkboxName,index) in item.list"
										:key="index">
										<van-checkbox :name="checkboxName"
											shape="square">{{checkboxName}}</van-checkbox>
									</view>
								</van-checkbox-group>
							</view>
						</view>
					</template>
					<template v-if="item.htmlElements==='单选框'">
						<view class="view_checkbox bomCol">
							<view class="lef">{{item.showName}}</view>
							<view class="rig">
								<van-radio-group :value="fieldObj[item.input]"
									@change="(data)=>change(data,item.input)">
									<view style="margin-bottom: 10rpx;" v-for="(checkboxName,index) in item.list"
										:key="index">
										<van-radio :name="checkboxName" shape="square">{{checkboxName}}</van-radio>
									</view>
								</van-radio-group>
							</view>
						</view>
					</template>
					<template v-if="item.htmlElements==='日期控件'">
						<view class="view_checkbox bomCol">
							<view class="lef">{{item.showName}}</view>
							<view class="rig rigCeel" @click="()=>onPoop_On(item,outerIndex)">
								<view class="view_value">{{ fieldObj[item.input] || item.desc }}</view>
								<view class="view_jiantou">
									<van-icon color="color: #ee0a24;" name="arrow" />
								</view>
							</view>
						</view>
						<van-popup round :show="item.showDate" @close="()=>onPoop_Off(item,outerIndex)"
							position="bottom" custom-style="height: 50%;">
							<view v-if="item.showDate">
								<van-datetime-picker :type="item.calendar_Type=='年月日'?'date':'datetime'"
									:title="item.calendar_Type" :value="item.pickerValue"
									@confirm="(date)=>onConfirm(date,item,outerIndex)"
									@cancel="()=>onPoop_Off(item,outerIndex)" :formatter="formatter" />
							</view>
						</van-popup>
					</template>
					<template v-if="item.htmlElements==='下拉框'">
						<view class="view_checkbox bomCol">
							<view class="lef">{{item.showName}}</view>
							<view class="rig rigCeel" @click="()=>onPoop_picker_On(item,outerIndex)">
								<view class="view_value">{{ fieldObj[item.input] || item.desc }}</view>
								<view class="view_jiantou">
									<van-icon color="color: #ee0a24;" name="arrow" />
								</view>
							</view>
						</view>
						<van-popup round :show="item.showDate" @close="()=>onPoop_picker_off(item,outerIndex)"
							position="bottom" custom-style="height: 50%;">
							<view v-if="item.showDate">
								<view style="width: 100%;box-sizing: border-box;padding-right: 20rpx;">


									<van-search :value="searchValue" placeholder="请输入搜索关键词" use-action-slot
										@change="onClickChange" @clear="onClickClear">
										<view slot="action" @click="()=>onSearch(outerIndex)">搜索</view>
									</van-search>
								</view>
								<van-picker show-toolbar :title="item.calendar_Type" :columns="item.list"
									:default-index="item.defaultindex" @cancel="()=>onPoop_picker_off(item,outerIndex)"
									@confirm="(date)=>onConfirm_picker(date,item,outerIndex)" />
							</view>
						</van-popup>
					</template>
				</block>


			</van-cell-group>
			<view @click="onSubmit">提交</view>
			<view v-for="(item,index) in 100" :key="index">{{index}}</view>
		</view>
	</view>
</template>


<script>
	import {
		convertToDateString,
		getTimestamp,
		getCurrentTime
	} from '../../utile/tool.js'
	export default {
		data() {
			return {
				userValue: null, //账号信息
				jiaShow: false, //防止滚动的，打开弹窗就让这个为true,关闭就为false
				fieldArray: [{
						"showName": "姓名姓名姓名姓名",
						"input": "name",
						"calendar_Type":"text",//普通文本
						"htmlElements": "输入框",
						"desc": "请输入姓名",
					},
					{
						"showName": "年龄年龄年龄",
						"input": "age",
						"calendar_Type":"number",//整数
						"htmlElements": "输入框",
						"desc": "请输入年龄",
					},
					{
						"showName": "价格价格价格",
						"input": "pice",
						"calendar_Type":"digit",//带小数的
						"htmlElements": "输入框",
						"desc": "请输入价格",
					},
					{
						"showName": "描述描述描述描述",
						"input": "name2",
						"htmlElements": "文本域",
						"desc": "请输入描述"
					},
					{
						"showName": "爱好爱好爱好爱好爱好",
						"input": "name3",
						"htmlElements": "复选框",
						"desc": "请选择爱好",
						"list": [
							'爱好1爱好1爱好1爱好1爱好1爱好1爱好1爱好1爱好1爱好1爱好1爱好1爱好1爱好1',
							'爱好2',
							'爱好3',
							'爱好4',
						]
					},
					{
						"showName": "性别",
						"input": "name4",
						"htmlElements": "单选框",
						"list": [
							'男',
							'女',
							'中性',
							'偏男两性人',
							'偏女两性人',
							'不完全男性',
							'不完全女性',
						]
					},
					{
						"showName": "出生日期出生日期出生日期",
						"input": "name5",
						"pickerValue": null,
						"htmlElements": "日期控件",
						"desc": "请选择出生日期",
						"calendar_Type": "年月日",
						"showDate": false, //弹窗开关
					},
					{
						"showName": "结婚时间结婚时间结婚时间",
						"input": "name6",
						"pickerValue": null,
						"htmlElements": "日期控件",
						"desc": "请选择结婚时间",
						"calendar_Type": "年月日时分秒",
						"showDate": false, //弹窗开关
					},
					{
						"showName": "职业职业职业职业职业",
						"input": "name7",
						"calendar_Type": "请选择职业",
						"htmlElements": "下拉框",
						"showDate": false, //弹窗开关
						"defaultindex": 0, //默认选中
						"desc": "请选择职业",
						"searchList": [{
								text: '杭州',
							},
							{
								text: '宁波'
							},
							{
								text: '温州'
							},
						], //此数组用来备份方便搜索用,  如果需要动态获取的话，那 list 和 searchList 都赋 空数组
						"list": [{
								text: '杭州',
							},
							{
								text: '宁波'
							},
							{
								text: '温州'
							},
						]
					}
				], // 表单字段集合
				fieldObj: {},


				searchValue: '',
			}
		},
		components: {},
		onLoad() {},
		onShow() {
			console.log('执行Vuex数据', this.$store.state.moduleIndex)
			this.userValue = this.$store.state.moduleIndex.User_value
			this.chushihua()


		},
		methods: {
			onSubmit() {
				console.log('所有输入的值', this.fieldObj)
			},
			change(a, b) {
				console.log('所有输入的值aaaa', a.detail)
				console.log('所有输入的值bbbb', b)
				this.fieldObj[`${b}`] = a.detail
			},
			/**
			 * 日期相关的
			 * 
			 * */
			formatTimestamp(timestamp) {
				const date = new Date(timestamp);
				const year = date.getFullYear();
				const month = (date.getMonth() + 1).toString().padStart(2, '0');
				const day = date.getDate().toString().padStart(2, '0');
				const hours = date.getHours().toString().padStart(2, '0');
				const minutes = date.getMinutes().toString().padStart(2, '0');
				const seconds = date.getSeconds().toString().padStart(2, '0');


				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			formatter(type, value) {
				if (type === "year") {
					return `${value}年`;
				}
				if (type === "month") {
					return `${value}月`;
				}
				if (type === "day") {
					return `${value}日`;
				}
				if (type === "hour") {
					return `${value}时`;
				}
				if (type === "minute") {
					return `${value}分`;
				}
				return value;
			},
			onPoop_On(date, index) {
				console.log('执行了吗')
				this.fieldArray[index].pickerValue = this.fieldArray[index].pickerValue ? this.fieldArray[index]
					.pickerValue : new Date().getTime()
				this.fieldArray[index].showDate = true
				this.jiaShow = true
			},
			onPoop_Off(date, index) {
				this.fieldArray[index].showDate = false
				this.jiaShow = false
			},
			onConfirm(date, item, index) {
				let dat = null
				if (this.fieldArray[index].calendar_Type == '年月日') {
					dat = convertToDateString(date.detail, '-')
				} else {
					dat = this.formatTimestamp(date.detail)
				}
				this.fieldObj[`${item.input}`] = dat //格式化后的年月日
				this.fieldArray[index].pickerValue = date.detail //时间戳
				this.fieldArray[index].showDate = false
				this.jiaShow = false
			},
			/**
			 * 下拉选择器相关的
			 * 
			 * */
			onClickChange(e) {
				this.searchValue = e.detail
			},
			onClickClear() {
				this.searchValue = ''
			},
			onSearch(index) {
				let list = this.fieldArray[index].searchList
				if (this.searchValue) {
					this.fieldArray[index].list = list.filter(item => item.text.includes(this.searchValue))
				} else {
					this.fieldArray[index].list = list
				}
			},
			// 数据需要动态的数组的话
			newList(cd) {
				setTimeout(() => {
					cd && cd()
				}, 300)
			},
			onPoop_picker_On(date, index) {


				if (this.fieldArray[index].searchList.length > 0) {
					this.newList(() => {
						let list = this.fieldArray[index].searchList
						this.listChushih(date, index, list)
					})
				} else {
					let list = this.fieldArray[index].searchList
					this.listChushih(date, index, list)
				}
			},
			listChushih(date, index, list) {
				this.searchValue = ''
				this.fieldArray[index].list = list
				let text = this.fieldObj[`${date.input}`]
				if (text) {
					this.fieldArray[index].defaultindex = this.fieldArray[index].list.findIndex(item => item.text ===
					text);
				} else {
					this.fieldArray[index].defaultindex = 0
				}
				console.log('下拉选中的--index', this.fieldArray[index].list)
				console.log('下拉选中的--index', this.fieldArray[index].defaultindex)
				this.fieldArray[index].showDate = true
				this.jiaShow = true
			},
			onConfirm_picker(date, item, index) {
				this.fieldObj[`${item.input}`] = date.detail.value.text
				this.fieldArray[index].defaultindex = date.detail.index
				this.fieldArray[index].showDate = false
				this.jiaShow = false
				this.searchValue = ''
			},
			onPoop_picker_off(date, index) {
				this.fieldArray[index].showDate = false
				this.jiaShow = false
				this.searchValue = ''
			},






			chushihua() {
				let that = this;
				setTimeout(() => {
					for (let i = 0; i < that.fieldArray.length; i++) {
						let item = that.fieldArray[i];
						if (item.htmlElements === '复选框') {
							that.$set(that.fieldObj, item.input, []);
						} else if (item.htmlElements === '日期控件') {
							that.$set(that.fieldObj, item.input, '');
						} else {
							that.$set(that.fieldObj, item.input, '');
						}
					}
					console.log('fieldObj', that.fieldObj)
				}, 300);


			},
			validateFields({
				field,
				message
			}, obj) {
				const value = obj[field];
				if (value === null || value === undefined || value === '') {
					Toast(message);
					return false;
				}
				const trimmedValue = String(value).trim();
				if (!trimmedValue) {
					Toast(message);
					return false;
				}
				return true;
			}
		}
	}
</script>




<style lang="scss" scoped>
	.homes {
		// width: 100%;
		// height: 100vh;
		box-sizing: border-box;
		background-color: #ffffff;
		overflow-y: auto;


		.bomCol {
			border-bottom: 1px solid #ee0a24 !important;
		}


		// padding: 20rpx;
		.view_checkbox {
			width: 100%;
			// height: 100rpx;
			background-color: #ffffff;
			box-sizing: border-box;
			padding: 20rpx 32rpx;
			position: relative;
			display: flex;
			align-items: center;


			.lef {
				max-width: 20%;
				min-width: 20%;
				margin-right: 24rpx;
				color: #323233;
				font-size: 23rpx !important;
			}


			.rig {
				flex: 1;
				font-size: 23rpx !important;
				background-color: #ffffff;
			}


			.rigCeel {
				display: flex;
				align-items: center;
				flex-direction: row;
				justify-content: space-between;
			}
		}


		.view_checkbox::before {
			content: "*";
			color: #ee0a24;
			font-size: 24rpx;
			left: 16rpx;
			top: auto;
			position: absolute;
		}


	}
</style>
最后一次编辑于  03-08
回答关注问题邀请回答
收藏

3 个回答

  • 那一抹笑😃 穿透阳光
    那一抹笑😃 穿透阳光
    03-08

    检查一下数据，这个是你数据有问题

    03-08
    有用
    回复
  • 张从心
    张从心
    03-08

    报错不是说了嘛，是个undefined，不是object，调用前多输出几下，看哪里不是期望值

    03-08
    有用
    回复
  • 曾不错耶
    曾不错耶
    03-08

    这个问题有人遇到过吗？？？


    03-08
    有用
    回复
请 登录 后发表内容
相关问题
相关文档