为什么 V-Dialog 不会出现？答案

【问题标题】：Why V-Dialog wont show up?为什么 V-Dialog 不会出现？
【发布时间】：2021-07-19 07:55:18
【问题描述】：

我试图弄清楚为什么 V-Dialog 不会弹出，当我尝试单击按钮时，v-dialog 应该会弹出但它没有弹出，这就是我遇到的错误

[object Error]: 
{description: "'ShadowRoot' is not defined", 
message: "'ShadowRoot' is not defined", 
number: -2146823279, 
stack: "ReferenceError: 'ShadowRoot' is not defined at 
handleShadow (eval code:33314:3) at 
inserted (eval code:33334:5) at 
callHook$1 (eval code:6714:7) at 
callInsert (eval code:6653:9) at 
wrappedHook (eval code:2243:5) at 
invokeWithErrorHandling (eval code:1862:5) at 
invoker (eval code:2183:9) at 
invokeInsertHook (eval code:6380:9) at 
patch (eval code:6599:5) at 
Vue.prototype._update (eval code:3957:7)"}

这里是代码： html

<div>
      <v-data-table
        :headers="headers"
        :items="data"
        class="elevation-1"
        hide-default-footer
      >

        <template v-slot:[`item.action`]="{ item }">
          <v-btn depressed @click="view(item.book_id)" color="primary">View</v-btn>
        </template>
      </v-data-table>
      <v-text-field v-model="ItemPerPage" label="Items Per Page" @change="GettingDataPerItem"> 
        </v-text-field>
    </div>

    <v-dialog v-model="dialog" max-width="800px">
      <v-card>
        <v-card-title>
          <span class="subtitle-1 font-weight-bold">Details Of Book</span>
        </v-card-title>
        <v-form lazy-validation>
          <v-col cols="12" align-self="center">
            <v-layout wrap justify-center>
              <v-flex d-flex lg5 sm5 xs12>
                <v-text-field v-model="book_id" :readonly="true" class="allText" label="Book ID"/>
              </v-flex>
              <v-divider class="mx-4" vertical/>
            </v-layout>
          </v-col>
          <v-card-actions>
            <v-layout v-if="IsActive === 0" justify-end class="ma-4">
              <div>
                <v-btn @click="dialog = false" style="width:150px;margin-left:10px" color="#263238" class="white--text">Close</v-btn>
              </div>
            </v-layout>
          </v-card-actions>
        </v-form>
      </v-card>
    </v-dialog>

当我阅读代码超过 20 次时，我觉得它看起来很好，并且一遍又一遍地阅读脚本，对我来说没有任何问题

脚本

export default {
  data() {
    return {
      dialog: false,
      //censored_code
    };
  },
view(emp_no) {
      this.$axios
        .$post(`some/api/.......`, {
          book_id: book_id,
        })
        .then((res) => {
            //result of the respond data
            this.dialog = true
        });
    },
},

这个 ShadowRoot 让我很恼火，如何解决这个问题？应该升级什么？

【问题讨论】：

看起来您缺少 view(emp_no) 周围的 methods() 块。
它只是我粘贴的一个方法，但我已经将 view() 方法包装在方法块中

标签： vue.js nuxt.js vuetify.js

【解决方案1】：

确保您的 <v-data-table> 和 <v-dialog> 元素包含在单个根中：

<template>
  **<something>**
    <div><v-data-table></v-data-table></div>
    <v-dialog/>
  **</something>**
</template>

【讨论】：

【解决方案2】：

终于解决问题了，我用的是microsoft edge，然后切换到firefox，弹出v-dialog

【讨论】：