uni-app 打包成QQ小程序后标签点击后动态添加样式

290 阅读1分钟

uni-app打包成QQ小程序后遇到的坑

注册页面有用户选择标签,当点击选中之后动态添加样式“active”,运行在浏览器里没有问题,当打包后运行在QQ小程序编辑器里发现点击之后数据可以获取到,但是页面中没有添加“active”样式

主要原因在于,created(在实例创建完成后被立即调用。在这一步,实例已完成以下的配置:数据观测 (data observer),属性和方法的运算,watch/event 事件回调。然而,挂载阶段还没开始,$el 属性目前不可见。---官方贴的)因此真正的DOM上不能添加样式“active”

<script>
	import tuiTags from '@/components/tag/tags'
	export default {
		components: {
			tuiTags
		},
		props: {
			yonghuBiaoQian:{
			    type: Array,
			    default: ()=>[]
			}
		},
		data(){
			return {
				behavior: [],
				fear: [],
				condition: [],
				emotion: []
			}
		},
		created(){
			this.init();
		},
		methods: {
			concatYonghuBiaoQian(array){
				this.yonghuBiaoQian = this.yonghuBiaoQian.concat(array);
			},
			init(){
				const data = {
					type: 'yhbq'
				}
				const that = this;
				this.yonghuBiaoQian = this.yonghuBiaoQian || []
				this.$api.findGlobalcodelist(data).then(res => {
					console.log(res);
					let list = res.data;
					list.forEach(item => {
						item.fontSize = 10;
						if( that.$tools.arrayTool.includes(that.yonghuBiaoQian , item.id ) ){
							item.check = true;
							item.tagClass = "tui-tag outline";
						}else{
							item.check = false;
							item.tagClass = "tui-tag active";
						}
					})
					this.behavior = list.filter(item => {
						return item.remarks == "行为标签"
					})
					this.fear = list.filter(item => {
						return item.remarks == "恐惧对象标签"
					})
					this.condition = list.filter(item => {
						return item.remarks == "身体状态标签"
					})
					this.emotion = list.filter(item => {
						return item.remarks == "情绪状态"
					})
					console.log(this.behavior, this.condition, this.emotion);
				})
			}
		}
	}
</script>

解决方法就是created换成mounted(el 被新创建的el替换, 并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素,当 mounted 被调用时 vm.$el 也在文档内。---官方贴的)

async mounted() {
	await this.init();
	this.$refs.behaviorRef.concatTags(this.behavior);
	this.$refs.conditionRef.concatTags(this.condition);
	this.$refs.emotionRef.concatTags(this.emotion);
},