Vue中如何显示自定义tooltip？绑定tooltip prop出现undefined怎么解决

错误原因及修复方案 #

你出现undefined报错主要是以下几个可逐一排查的问题：

1. 模板v-model冗余this
   你在输入框绑定写了v-model="this.product.sku"，Vue模板内直接访问实例属性即可，不需要加this，修改为：

   <input type="text" id="sku" v-model="product.sku" placeholder="ID">
   

2. 父组件未正确初始化tooltip响应式数据
   你在子组件内访问了嵌套属性tooltip.tooltipText.onSubmit，如果父组件data中没有提前声明完整的嵌套结构，访问不存在的对象属性就会抛出undefined错误。需要在父组件data中按使用层级初始化：

   data() {
     return {
       product: {
         sku: ''
       },
       // 必须按你使用的层级提前声明结构
       tooltip: {
         tooltipText: {
           onSubmit: 'SKU为必填字段，请填写'
         }
       }
     }
   }
   

3. 子组件未正确声明tooltip prop
   你的tooltips自定义组件需要显式声明接收tooltip属性，还可以配置默认值避免父组件未传值时的undefined报错：

   // tooltips组件配置
   props: {
     tooltip: {
       type: Object,
       default: () => ({
         tooltipText: {
           onSubmit: ''
         }
       })
     }
   }
   

4. 子组件冗余绑定可删除
   你在子组件的.tooltiptext元素上额外加的v-bind:tooltip="tooltip"属于无意义的重复绑定，直接删除即可，子组件内部已经可以通过prop直接访问tooltip数据。

可选优化 #

如果使用Vue3，可以在模板中用可选链运算符避免层级属性不存在的报错：

<span class="tooltiptext">{{ tooltip?.tooltipText?.onSubmit }}</span>

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