vue2.x遇到的问题总结
本文由 小茗同学 发表于 2017-08-15 浏览(3347)
最后修改 2018-02-05 标签:vue

vue2.x中单选框单击事件延迟问题

前一阵子发现@click存在延迟问题,今天又碰到了发现又没有,所以仔细对比了一下。

由于项目中单选框的样式是由label实现的,真实的input隐藏起来了:

<template v-for="(item, i) in dimensions" >
	<label class="checkbox-inline" :for="'dimension_'+i" @click="toggleDimensions()"> {{item.name}}</label>
	<input style="visibility:hidden;" type="radio" :id="'dimension_'+i"  name="dimension" :value="item.key" v-model="params.dimension" />
</template>
<script>
// JS部分
{
	watch: {
		'params.dimension'(newVal) {
			console.log(newVal);
		}
	},
	methods: {
		toggleDimensions() {
			console.log(this.params.dimension)
		}
	}
}
</script>

最后发现watch监听获取的是实时正确的,但是@click获取的有延迟,必须手动延时100-200毫秒左右才能获取到正确的值。

今天才发现其实是因为把@click写在了label上面,如果写在input上面就没有问题:

<template v-for="(item, i) in dimensions" >
	<label class="checkbox-inline" :for="'dimension_'+i"> {{item.name}}</label>
	<input style="visibility:hidden;" type="radio" :id="'dimension_'+i"  name="dimension" :value="item.key" v-model="params.dimension"  @click="toggleDimensions()"/>
</template>

另外,如果是直接用label包裹input的方式<label><input type="radio"/></label>,@click只能写在input上面,因为写在label上面会触发2次单击事件(暂不清楚为何)。

最后,总之,@click写在input上永远是正确的。

20171128更新

今天又碰到这个问题,发现<label><input type="checkbox" @click="toggleDimensions"/></label>也存在延迟问题,,不知道是不是checkbox和radio的区别,有待进一步验证。

对象的刷新问题

看如下例子,如果直接给this.page_list整体赋值,则DOM会刷新,如果只是this.page_list[i] = xxx;这样赋值,则不会刷新,之前一直没有发现,是因为页面还有其它地方修改了data导致DOM刷新,例如如果我把下面的this.query();给放开那么this.page_list[i] = xxx;这样赋值也是可以的(由于query可能在initSelect之前执行,也有可能之后,所以有时候下拉框会出来,有时候又出不来)。

<select v-model="params.page_one_code" class="form-control">
	<option value="">--请选择--</option>
	<option :value="item.page_code" v-for="item in page_list">{{item.page_name}}</option>
</select>
<script>
// 仅展示部分代码
	export default {
		data: function()
		{
			return {
				query_page_list_url: 'chart_config/chart_page_list_query.json',
				page_list: {},
			};
		},
		mounted: function()
		{
			this.initSelect();
			//this.query();
		},
		methods:
		{
			/**
			 * J初始化下拉框
			 */
			initSelect: function()
			{
				this.$ajax.postJson(this.query_page_list_url, {}).then((resp) =>
				{
					console.log(resp);
					var list = resp.result_rows;

					// 写法一:
					list.forEach(page => {
						this.page_list[page.page_code] = page;
					});

					// 写法二:
					var page_list = {};
					list.forEach(page => {
						page_list[page.page_code] = page;
					});
					this.page_list = page_list;
				});
			},
		}
	}
</script>

组件内的变量共享问题

例如,假设我有一个日期组件,同一个页面可能会有多个实例,今天无意中发现直接放在script里面的变量在不同的组件实例中是共享的:

假设代码如下:

<template>
	xxx
</template>
<script>
	let closeId = null;
	export default {
		data(): {

		}
	};
</script>

比如我在左边组件中将closeId修改为1,结果右边组件也变成了1,只有把它放到data里面才不会共享:

<template>
	xxx
</template>
<script>
	export default {
		data(): {
			closeId: null
		}
	};
</script>