v-popover不包裹元素指定目标后弹出层不显示，缺失什么配置？

问题原因 #

你遇到的问题来自两个配置错误：

1. 属性作用混淆：container属性是用来指定popover弹层挂载的父DOM节点，不是指定触发目标元素，你要绑定触发目标应该用target属性
2. target属性入参错误：target不接收字符串格式的ID，要求传入真实的DOM元素对象/组件实例引用，同时无内部包裹元素时，默认的自动触发逻辑不会生效，需要手动控制显隐

正确实现步骤 #

1. 先给目标元素绑定事件手动控制popover显隐，同时获取目标元素的DOM引用

<!-- 目标元素，每个实例对应独立的响应式显隐变量和DOM引用 -->
<div 
  :id="itemId"
  @mouseenter="isPopShow = true"
  @mouseleave="isPopShow = false"
>
  触发popover的目标内容
</div>

2. 调整v-popover的配置：

<v-popover 
  offset="0" 
  placement="right" 
  :target="document.getElementById(itemId)"
  :open="isPopShow"
>
  <template slot="popover">My awesome popover</template>
</v-popover>

注意：template中直接写变量名即可，不需要加this前缀

更稳妥的实现方式（避免DOM未渲染获取失败） #

用ref直接获取DOM引用，不需要依赖ID查询：

<div 
  :ref="el => popTarget = el"
  @mouseenter="isPopShow = true"
  @mouseleave="isPopShow = false"
>
  触发popover的目标内容
</div>

<v-popover 
  offset="0" 
  placement="right" 
  :target="popTarget"
  trigger="manual"
  v-model:open="isPopShow"
>
  <template #popover>My awesome popover</template>
</v-popover>

如果是多个循环生成的实例，只要把popTarget和isPopShow存为数组/对应每条数据的属性即可保证实例独立。

内容的提问来源于stack exchange，提问作者Growth Mindset