Vue自定义组件中v-show触发TypeError: Cannot read property '_withTask' of undefined

你遇到的这个报错，大概率和事件绑定方式或者组件依赖配置有关，我帮你一步步排查解决：

1. 优先检查click Prop的传递是否正确 #

你的子组件把click作为函数类型的prop接收，但如果父组件传递时没用到动态绑定，会导致click被当作字符串而非函数传递，触发调用错误。

错误传递示例： #

<!-- 父组件错误写法：click未加:，会被解析为字符串 -->
<editable-image click="handleImageClick" image-url="xxx.png" width="100px" />

正确传递方式： #

必须用:click（或v-bind:click）绑定函数：

<editable-image :click="handleImageClick" :image-url="xxx.png" :width="100px" />

同时建议给子组件的click prop加上类型校验，提前规避类型错误：

// 子组件script部分修改props定义
export default {
  props: {
    imageUrl: {
      type: String,
      required: true
    },
    width: {
      type: String,
      default: '100px'
    },
    click: {
      type: Function,
      required: true // 根据业务需求决定是否必填
    }
  },
  data() {
    return {
      iconShown: false
    }
  }
}

2. 确认Vuetify的v-icon组件是否正确配置 #

你使用了Vuetify的v-icon组件，如果项目未正确安装、引入Vuetify，会导致组件渲染异常，进而影响v-show指令的执行。

确保在项目入口文件（比如main.js）中正确配置Vuetify：

import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'

Vue.use(Vuetify)

new Vue({
  vuetify: new Vuetify(),
  render: h => h(App)
}).$mount('#app')

3. 临时替换v-show为v-if测试 #

虽然你怀疑v-show是问题根源，可以临时替换成v-if验证是否是指令渲染机制的问题：

<!-- 子组件模板中修改v-show为v-if -->
<v-icon style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);" large color="grey" v-if="iconShown">edit</v-icon>

如果替换后报错消失，说明可能是v-show与v-icon的渲染冲突，这时候需要进一步排查Vuetify和Vue的版本兼容性。

4. 检查Vue与Vuetify的版本兼容性 #

_withTask属性通常和Vue的事件处理包装逻辑相关，如果Vue版本和Vuetify版本不匹配，很容易出现这类奇怪的报错：

• Vuetify 2.x 需要搭配 Vue 2.x 使用
• Vuetify 3.x 需要搭配 Vue 3.x 使用

可以在项目根目录执行npm list vue vuetify查看当前版本，确保两者兼容。

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