无法让 vue-google-charts 在浏览器模式下工作答案

【问题标题】：Cannot get vue-google-charts to work in browser mode无法让 vue-google-charts 在浏览器模式下工作
【发布时间】：2021-05-07 12:18:36
【问题描述】：

我开始学习 Vue.js 并且可以独立使用 Google 图表，但无法让 vue-google-charts 组件工作。我已经按照https://github.com/devstark-com/vue-google-charts#browser 此处的说明包含了vue.js 和vue-google-charts.js，但图表没有呈现并得到以下错误消息

Unknown custom element: <gchart>

例子可以看这里https://jsfiddle.net/ugLc0zrj/

我做错了什么？

【问题讨论】：

This answer 可能会对您有所帮助。

标签： javascript vue.js google-visualization

【解决方案1】：

在控制台你可以看到这个错误：

Cross-Origin Read Blocking (CORB) blocked cross-origin response https://raw.githubusercontent.com/devstark-com/vue-google-charts/master/dist/vue-google-charts.browser.js with MIME type text/plain. See https://www.chromestatus.com/feature/5629709824032768 for more details.

脚本未加载。其他人使用raw.githubusercontent.com 也有类似问题：Github issue- i couldn't use the component directly on browser

改用作者建议的这个 CDN 链接：https://unpkg.com/vue-google-charts@0.3.3/dist/vue-google-charts.browser.js

Working fiddle

【讨论】：

谢谢，我在本地没有使用外部 URL 并得到同样的错误。但是，我看到您添加了一个 template 属性，这似乎使一切变得不同！我很想知道为什么需要这样做，但不管怎样，你都是传奇。
@drjeep 因为如果你把它直接放在 HTML 中，浏览器会处理它，它不知道 <GChart> 元素是什么，它需要被处理并且生成的 HTML 应该被添加到DOM by Vue.js，让我知道是否清楚，或者我可以尝试改写它`