vue组件中watch props根据v-if动态判断并挂载DOM的问题

2023-08-23 15:28:05 73

问题复现：父组件中通过名为source的prop向子组件Chart传入数据

importChartfrom'../components/Chart'

exportdefault{
name:'Home',
components:{Chart},
data(){
return{
chartData:[]
}
},
mounted(){
setTimeout(()=>{
this.chartData=[
[89.3,58212,'MatchaLatte'],
[57.1,78254,'MilkTea'],
[74.4,41032,'CheeseCocoa'],
[50.1,12755,'CheeseBrownie'],
[89.7,20145,'MatchaCocoa'],
[68.1,79146,'Tea'],
[19.6,91852,'OrangeJuice'],
[10.6,101852,'LemonJuice'],
[32.7,20112,'WalnutBrownie']
]
},2000)
}
}

子组件接收source数据当存在且至少有一条数据的时候，创建id为main的div，用以初始化echarts实例

none

Chart组件通过接收数据watchprop的变化动态的调用echarts的setOptions方法，最终渲染数据。

exportdefault{
//...
watch:{
source(newVal,oldVal){
this.setOpts()
}
},
props:['source'],
methods:{
setOpts(){
letmyChart=this.$echarts.init(this.$refs.main)
myChart.setOption({
dataset:{
//...
source:this.source
},
//...
})
}
}
}

如果直接这么写必定报错：

Errorincallbackforwatcher"source":"TypeError:Cannotreadproperty'getAttribute'ofundefined"

在代码中增加一行代码：

watch:{
source(newVal,oldVal){
console.log(newVal,this.$refs.main)//[Array...]undefined
this.setOpts()
}
},

启示source数据虽然有了，但div还并未挂载，因此echarts无法完成初始化

那么想当然的我们就会去在mounted生命周期函数中调用setOpts方法：

mounted(){
console.log(this.source,this.$refs.main)//[]undefined
this.setOpts()
},

这样也是错的，因为模板语法中使用了v-if，那么当source并未满足条件的时候，div当然也不会挂载。因此div仍然无法访问到。

Errorinmountedhook:"TypeError:Cannotreadproperty'getAttribute'ofundefined"

解决办法是要么去掉v-if要么换另一种写法

有时我们需要在没有数据的情况下增加一个占位标签用来展示一些额外的提醒信息，如“暂未获取到数据”等。那么去掉v-if肯定不行。

既然如此我们保留v-if但写法有所改变：

修改Chart组件：

我们只需要一个source数据源，当mounted的时候调用setOpts方法，当watch数据变化的时候再次调用以更新数据

exportdefault{
name:'Chart',
props:['source'],
mounted(){
this.setOpts()
},
watch:{
source(){
this.setOpts()
}
},
methods:{
setOpts(){
letmyChart=this.$echarts.init(this.$refs.main)
myChart.setOption({
dataset:{
dimensions:['score','amount','product'],
source:this.source
},
xAxis:{type:'category'},
yAxis:{},
series:[
{
type:'bar',
encode:{
x:'product',
y:'amount'
}
}
]
})
}
}
}

v-if的判断我们把他移出去了我们判断chartData是否获取到，一旦获取到数据，马上加载Chart组件，这样就可以避开在组件内部调用v-if带来的问题：


importChartfrom'../components/Chart'

exportdefault{
name:'Home',
components:{Chart},
data(){
return{
chartData:[],
flag:false
}
},
methods:{
getData(){
setTimeout(()=>{
this.chartData=[
[89.3,58212,'MatchaLatte'],
[57.1,78254,'MilkTea'],
[74.4,41032,'CheeseCocoa'],
[50.1,12755,'CheeseBrownie'],
[89.7,20145,'MatchaCocoa'],
[68.1,79146,'Tea'],
[19.6,91852,'OrangeJuice'],
[10.6,101852,'LemonJuice'],
[32.7,20112,'WalnutBrownie']
]
this.flag=true
},2000)
}
},
mounted(){
this.getData()
}
}

另外还可将Chart组件和站位标签一同封装成一个ChartWrapper。

这样就不会因在组件内部调用watch监听props的变化动态v-if判断并挂载数据到DOM上出现的这种问题了。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

vue组件中watch props根据v-if动态判断并挂载DOM的问题

热门推荐

随机推荐