使用element-plus的tooltip组件,最开始的写法是这样的:
<el-tooltip
class="box-item"
effect="dark"
content="tooltip content"
>
<el-button v-if="isDisabled" :underline="false" type="primary">点击保存</el-button>
</el-tooltip>
注意:我们判断是否显示的变量isDisabled
写在button按钮上。每次加载都会出现如下的warning:
这个提示是说这个组件没有发现有效的子节点。怎么改呢?改成下面这样:
<el-tooltip
class="box-item"
effect="dark"
content="tooltip content"
v-if="isDisabled"
>
<el-button :underline="false" type="primary">点击保存</el-button>
</el-tooltip>
把判断是否显示的变量isDisabled
写在了tooltip上,就不会报错了。
原因呢:就是如果把isDisabled
写在button上,那么tooltip其实是会加载的,但当isDisabled
为false
时,button不显示,可不就是没有有效的子节点吗!把判断变量移上去之后就不提示了。
有些错误可真是常犯常新、常新常犯啊!!记录一下。