组件未显示在 Vue DevTools 中

2024-03-05

有人遇到过这个问题吗?我正在使用 Vue Devtools,但无法检查任何组件,因为没有显示任何组件。没有根组件或任何东西。几乎只是一个空白的开发工具。我是 Vue 新手,所以我确信我错过了一些明显的东西。我正在使用 webpack cli 模板,还没有实现任何 Vue Router 的东西。搜索组件时也没有任何结果。我假设这三个文件中有什么内容?

main.js

import Vue from 'vue'
import App from './App'
var db = firebase.database();

var vm = new Vue({
  el: '#app',
  created: function() {
    // Import firebase data 
    var quizzesRef = db.ref('quizzes');
    quizzesRef.on('value', function(snapshot) {
      console.log(snapshot.val());
      vm.quizzes = snapshot.val();
    });
  },
  data: function() {
    return {
        authenticated: false,
        quizzes: {},
        resources: []
    }
  },
  template: '<App/>',
  components: { App }
})

App.vue

<template>
  <div id="app">
    <navbar></navbar>
    <resource-info></resource-info>
  </div>
</template>

<script>
import Navbar from './components/Navbar'
import ResourceInfo from './components/ResourceInfo'

export default {
  name: 'app',
  components: {
    Navbar,
    ResourceInfo
  }
}
</script>

<style>
</style>

Index.html(省略标题)

<body>
    <div id="app" class="container-fluid"></div>
    <!-- built files will be auto injected -->
    <script>
      // Initialize Firebase
      var config = {
        apiKey: "",
        authDomain: "",
        databaseURL: "",
        storageBucket: "",
        messagingSenderId: ""
      };
      firebase.initializeApp(config);
    </script>
</body>

我遇到了同样的问题,以下是为我解决的问题:

Ensure Allow access to file URLs在 Chrome 扩展设置中(chrome://extensions)已启用。重新启动 Chrome。

打开Vue DevTools扩展,在页面上打开一个Vue组件后点击右上角的刷新按钮。

我希望这可以帮助别人。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

组件未显示在 Vue DevTools 中 的相关文章

  • Google 地点自动完成 Vue.js

    我正在尝试在 Vue js 中实现 Google Places Autocomplete The API 指出 https developers google com maps documentation javascript refere
  • 如何在Nuxt Js中使用Google Map API?

    下面是我在 Nuxt Js 中获取 API 的代码 我已经编写了用于调用 API 的代码 但没有得到结果 我也没有得到任何与此相关的资源 async created const config headers Accept applicati
  • 使用 v-bind Vue.js 的多个变量

    我试图在以下代码中传递多个变量 div div 但我收到以下错误 Vue warn 无法生成渲染函数 SyntaxError 意外的标记 在 我尝试更换 with a 但我得到 Vue warn 无法生成渲染函数 SyntaxError I
  • Vue Cli 3 禁用代码分割 - 无法删除哈希文件

    我有一个vue config js设置效果很好 并取消了默认的代码分割 但它仍然输出一个 CSS 文件 其哈希值与具有好名称的 CSS 文件相同 我可以编写一个脚本来删除它 但我想知道是否有一种方法可以将文件设置为不输出带有哈希的CSS文件
  • Cypress Vue 组件测试从已挂载发出的事件

    我有一个 vue2 组件 它在其安装的生命周期挂钩中发出一个事件 该事件被发出 并且可以由使用该组件的页面处理 但是 我还想测试该事件是否在我的组件测试中发出 该测试使用赛普拉斯组件测试运行程序 这是一个精简版本 组件 TheCompone
  • 在 docker 容器内运行 vite 开发服务器

    我有一个 Vue cli 应用程序 我正在尝试将其转换为 vite 我正在使用 Docker 来运行服务器 我看了几个教程 并让 vite 在开发模式下运行 没有错误 但是 浏览器无法访问该端口 也就是说 当我在 macbook 的命令行上
  • vue-router 仅更改命名视图之一,而不影响其他视图

    我正在使用 vue router 进行测试并遇到这个问题 如果我有两个命名视图但我只想更改其中一个而不更改默认视图怎么办 目前我是这样做的 const router new VueRouter routes path components
  • 使用Vue组件渲染函数时无限循环

    我正在使用 Vue 组件来渲染一些表头 如下所示 render createElement return createElement div class header Array apply null length this initHou
  • 如何在 Vue 中动态创建的组件上获取更新的 $refs?

    我的组件数量取决于数组数量 因此当我向数组添加新项目时 它应该创建新组件 当创建新组件时 我想获得它的参考 这就是我有误解的地方 最后添加的组件是undefined当我试图得到它时 但是 如果我在一段时间后尝试获取参考 它就会起作用 我猜这
  • Vuetify 默认轮播 CSS 选择器,用于减少过渡持续时间

    I need a transition that does not produce the dreaded image blinking for a v carousel item Ideally it s a smooth and qui
  • 无法安装组件:模板或渲染函数未定义。组件导入失败

    我正在尝试复制 vue 教程示例 在这里找到 https v3 vuejs org guide component basics html passing data to child components with props https
  • Vue 3:“defineProps”引用本地声明的变量

    为什么我收到警告错误消息 defineProps引用本地声明的变量 eslint vue valid define props 当我在 props 中使用自定义验证器时SFC
  • 未捕获的类型错误:emit 不是 vue3 中的函数

    当我在 vue 3 设置代码块中编写此代码以获取输入值时 请遵循此answer https stackoverflow com questions 66737918 how to use v model on component in vu
  • vue.js:观察输入并未在每次按键时触发

    我有一个input正在监视其模型属性 问题是每次按键时不会调用 watch 方法铬 安卓设备 如果我点击输入文本 就会调用它 过去确实有效 但我不知道发生了什么 在Chrome 桌面版可以正常使用 那就是watch for text每次按键
  • 在 iframe/对象标签内运行时更新初始路由器 url

    我目前正在容器 主 Vue 应用程序的对象标签 iframe 也可以工作 内渲染 Vue 应用程序 首先 我设置一个文件服务器 为该容器或请求的子应用程序提供服务 以在 div 内呈现 为了简单起见 我将仅显示 Node Express 服
  • vue:转义并渲染 HTML 字符串?

    我正在尝试在模板中渲染一些 HTML 字符串 但我希望它们是字符串 我不想渲染 富文本 我开始于
  • 如何从特定索引渲染 v-for

    我想在 v for 中循环假设从数字 5 到 10 循环希望在 5 点开始并在 10 点结束 我试过这个 div div 但我想要更有效的循环方式 有谁知道如何让循环从 5 开始 对于你的例子来说是可能的 div some code her
  • Vuejs 在模板中添加多行?

    我想知道在构建 Vuejs 模板时如何最好地安排新行 我的代码不起作用 因为它破坏了 JavaScript 容器 Vue js 希望我将整个 html 放在一行中 当我计划添加页脚内容时 这有点不切实际 Vue component foot
  • 如何从 Laravel 将路由参数传递到 Vue.js

    我有这样的路线来获取带有相关评论的帖子 Route get api topics category id title function category id title return App Topic with comments gt
  • 基于 json 文件动态显示选择、复选框、日期选择器等

    对我之前的问题的补充 我根据 json 文件动态显示输入字段 现在我想根据它们的组显示选择项 复选框和日期选择器 我如何解决这个问题 我需要将这些元素推入computeJSON 但写入例如选择options item selection不管

随机推荐

  • 如何禁用 .htaccess 中的 mod_security 和 mod_security2

    我创建了一个 WordPress 插件 该插件很受欢迎 但我收到很多抱怨它不起作用 登录到许多用户的 WP 网站后 在询问管理员密码后 我注意到我无法轻松解决的最后一个问题是 mod security 和 mod security2 阻止了
  • load 在本地路径上工作,require 则不行

    装载者 rb puts gt This is the second file 加载演示 rb puts This is the first master program file load loadee rb puts And back a
  • Excel:按行内容对列进行排序

    这很难描述 我有一些专栏 比如说三个 10 20 20 20 22 24 24 24 26 我喜欢得到的是 10 XX XX 20 20 20 XX 22 XX 24 24 24 XX XX 26 其中 XX 是空单元格 有办法得到这个吗
  • python 计算列表中的元素数量

    我需要能够计算出列表中有多少个字符串 O top board None None None None None None None None None None None None None None None None None None
  • 使用服务的 DDD 实体

    我有一个应用程序 我试图使用至少一个名义上的 DDD 类型的域模型来构建 并且正在努力解决某个部分 我的实体有一些业务逻辑 这些逻辑使用我当前在某些域服务中拥有的一些财务计算和费率计算 以及我放入值对象中的一些常量值 我正在努力解决如何让实
  • 如何在不使用任何框架或库的情况下在屏幕上绘制图形?

    我想手动绘制图形 这意味着不使用任何库或框架 如 QT directX whindow h 就像向屏幕上的每个像素发出命令以在不同时间显示某种特定颜色 每个机构都会根据这些库或它们的名称提供教程 我想要的是制作我自己的 GUI 据我所知 这
  • 强制从外部页面刷新网页

    我有这样的情况 100 台计算机正在显示一个网页 我可以从后端更新此网页 我希望我的 100 台计算机上显示的网页能够自动更新 有没有办法在不轮询的情况下刷新 更新页面 最好的方法是外部页面可以强制页面重新加载 但我认为这是不可能的 Tha
  • 如何在 mariadb 中使用 -> 运算符查询 JSON 列

    我正在尝试获取时间表 将 json 列数据与 Laravel 项目中的以下代码进行比较 schedules Schedule where schedule with gt company person contact company per
  • Cassandra 3.10 debug.log 频繁包含“FailureDetector.java:457 - 忽略间隔时间...”

    我们的 Cassandra 3 10 集群之一的 debug log 文件经常出现类似于 FailureDetector java 457 忽略 的间隔时间 的消息 即使集群处于空闲状态 也会显示这些消息 我在这个 6 节点集群 两个数据中
  • 使用 Ruby 读取文件的上一行

    如何读取文件的前一行 与 IO gets 相反 我最初想将 IO lineno 设置为我想要读取的行号 但这并没有按预期工作 您实际上如何阅读前一行 一个简单的方法是记住您读过的上一行 prev nil File foreach vimrc
  • 如何获取未知 JSON 层次结构的总深度?

    我一直在努力寻找 构建一个递归函数来解析这个 JSON 文件并获取其子文件的总深度 该文件看起来像这样 var input name positive children name product service children name
  • 从点云到 Mat 的转换

    假设我初始化了一个点云 我想将其 RGB 通道存储在 opencv 的 Mat 数据类型中 我怎样才能做到这一点 pcl PointCloud
  • Chartjs 示例无法重现

    我希望从 Chartjs 文档中重现此示例的结果 https www chartjs org docs latest samples scales time line html https www chartjs org docs late
  • R 3.0.x 中的 RExcel

    兰德之友 http rcom univie ac at download html RAndFriends 其中包括运行所需的所有项目RExcel 仅包括R 2 15 2 我目前使用的是最新版本R but rcom 2 3 1 and rs
  • Android StaggeredGridLayoutManager 偏移错误

    当你清除你的adapter并打电话notifyDataSetChanged 交错网格布局管理器经理还有mCachedStart End in Span 实例 因此 当您向适配器添加新项目时 布局管理器会使用以下命令绘制项目offset 这是
  • 修改可变对象的方法?

    鉴于函数式编程在尽可能坚持不可变变量时是最好的 并且 Ramda 总是进行浅拷贝 那么对象如何must在大多数纯功能框架中处理可变的问题 例如 考虑 PIXI Sprite 在 pixi js 中 显示系统具有链接在一起的固有层次结构 并且
  • 在堆积条形图中添加组之间的间距

    假设我有一个带有分组条形的条形图 酒吧有一个大团体和多个非常小的团体 组标签位于组上 为了增加可读性 我想在组之间引入一定的间距 我使用以下代码和图像编辑器创建了一个示例图像 library ggplot2 g lt ggplot mpg
  • 指示函数使用“参数”对象的最清晰方法是什么?

    指示函数使用 参数 对象的最佳方式是什么 这显然是基于意见的 但是有任何约定吗 什么时候使用参数数组更好 一些例子 Function takes n arguments and makes them pretty function many
  • 如何将 JWT 令牌存储在仅 HTTP 的 cookie 中?

    我创建了一个应用程序 它仅使用服务器根据正确的登录凭据发送的 JWT 并对任何内容进行授权 api我的后端 Express js 服务器上的路由 另一方面 AngularJS 获取此令牌 将其存储在会话存储中 并每次都使用身份验证拦截器将令
  • 组件未显示在 Vue DevTools 中

    有人遇到过这个问题吗 我正在使用 Vue Devtools 但无法检查任何组件 因为没有显示任何组件 没有根组件或任何东西 几乎只是一个空白的开发工具 我是 Vue 新手 所以我确信我错过了一些明显的东西 我正在使用 webpack cli