[Vue 警告]：指令中的错误 intersect unbind 钩子：“TypeError：无法读取未定义的属性‘observer’”

Posted 2023-02-16

【中文标题】[Vue 警告]：指令中的错误 intersect unbind 钩子：“TypeError：无法读取未定义的属性‘observer’”

【英文标题】：[Vue warn]: Error in directive intersect unbind hook: "TypeError: Cannot read property 'observer' of undefined"

【发布时间】：2021-12-22 12:54:03

【问题描述】：

我不明白为什么会显示此消息。只有当我点击一个按钮并且我被router.push 重定向到页面时才会出现。

[Vue 警告]：指令中的错误 intersect unbind hook：“TypeError: Cannot read property 'observer' of undefined”

由于我不确定问题出在哪里，所以我将向您展示路由器以及结构：

顺便说一句。 Streamers 是一个不同的页面，而不是这个页面（检查下面的路线）。

你能帮帮我吗？

结构

App.Vue -> Dashboard.Vue -> StreamerDetail.Vue

App.Vue

<template>
  <v-app id="inspire">
    <router-view></router-view>
  </v-app>
</template>
<script>

export default 
  data: () => (),
  mounted() 
    this.$store.dispatch('loadInitial')
  

</script>

Dashboard.Vue

<template>
  <div>
    <v-app-bar app absolute>

    </v-app-bar>

    <v-navigation-drawer bottom color="primary" dark app>
      <v-list nav>
        <v-list-item @click="$router.push(name:'Home').catch(err => )">
          Home
        </v-list-item>
      </v-list>
    </v-navigation-drawer>
    <v-content>
      <router-view></router-view>
      <v-snackbar
          :timeout="3000"
          :value="!!$store.state.snackbar.message"
          :multi-line="true"
          :color="$store.state.snackbar.color"
          @input="$store.commit('resetSnackbar')">
         $store.state.snackbar.message 
      </v-snackbar>
    </v-content>
  </div>
</template>

StreamerDetail.Vue

<template>
  <v-row v-if="streamer" class="my-12">
   // even if I delete everything inside this row, the error is still present
  </v-row>
</template>

路由器

const routes = [
  
    path: '/',
    name: 'Home',
    component: Dashboard,
    redirect: '/streamers',
    children:[
      
        path: 'streamers/',
        name: 'Streamers',
        component:Streamers,
      ,
      
        path: 'streamers/:id/detail/',
        name: 'StreamerDetail',
        component:StreamerDetail,
      ,
    ],
  ,
  
    path: '/login',
    name: 'Login',
    component: Login,
  
]

【问题讨论】：

刚刚遇到了类似的问题

我也是，你明白了吗？

【参考方案1】：

修复：更新到 vuetify 2.6.0

您的问题与 v-img 标记有关，确认尝试在您的 v-simple-table 或该视图中评论所有 v-img。

在本期中提到并在最新更新中解决。

https://github.com/vuetifyjs/vuetify/issues/14390