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);
},