TradingView 未在 Vue 挂载钩子中定义

Question

我不知道我是否应该在这里或其他地方提问，但我正在使用 tradingview 库，它对我有用，但不是我想要的。

根据文档，我将我的代码放入 vue 中的 index.html 文件中，在脚本标记下并且我的 tradingview 有效，但是我想将这段代码放在 mounted 下，但是我收到此错误：

Error in mounted hook: "ReferenceError: TradingView is not defined"

这里是 index.html 文件中有效的代码示例：

<script type="text/javascript" src="/charting_library/charting_library.min.js"></script>
<script type="text/javascript" src="https://d33t3vvu2t2yu5.cloudfront.net/tv.js"></script>
<script>

function getParameterByName(name) {
name = name.replace(/[\[]/, "\[").replace(/[\]]/, "\]");
var regex = new RegExp("[\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

TradingView.onready(function() {
  var widget = new TradingView.widget({
    symbol: 'Bitfinex:ETHUSD',
    interval: '30',
    theme: 'Dark',
    style: '1',
    container_id: "tv_chart_container",
    library_path: "/charting_library/",
    locale: getParameterByName('lang') || "en",
    width: '100%',
    height: '600px',
    debug: false,
    preset: "mobile"
  });

})

这是我的 vue 文件中安装的代码：

mounted () {
TradingView.onready(function() {
  new TradingView.widget({
    symbol: 'Bitfinex:ETHUSD',
    interval: '30',
    theme: 'Dark',
    style: '1',
    container_id: "tv_chart_container",
    library_path: "/charting_library/",
    locale: this.getParameterByName('lang') || "en",
    width: '100%',
    height: '600px',
    debug: false,
    preset: 'mobile'
  })
})
}

有谁知道为什么这里没有定义TradingView？

Answer 1

您缺少使用 vue 脚本，因此请按以下方式添加它：

    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>

检查此工作代码：

new Vue({
  el: '#app',

  data() {
    return {
   
     
     }
  },
 mounted () {
TradingView.onready(function() {
  new TradingView.widget({
    symbol: 'Bitfinex:ETHUSD',
    interval: '30',
    theme: 'Dark',
    style: '1',
    container_id: "tv_chart_container",
    library_path: "/charting_library/",
    locale: this.getParameterByName('lang') || "en",
    width: '100%',
    height: '600px',
    debug: false,
    preset: 'mobile'
  })
})
}
  });

<script type="text/javascript" src="/charting_library/charting_library.min.js"></script>
<script type="text/javascript" src="https://d33t3vvu2t2yu5.cloudfront.net/tv.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script>

function getParameterByName(name) {
name = name.replace(/[\[]/, "\[").replace(/[\]]/, "\]");
var regex = new RegExp("[\?&]" + name + "=([^&#]*)"),
results = regex.exec(location.search);
return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

</script>
<div id="app">
</div>

Answer 2

如果有人遇到同样的问题，那么对我来说 setTimeout 就成功了。这是代码：

mounted () {
  setTimeout(function() {
   // TradingView code
  }, 1000)
}

TradingView 未在 Vue 挂载钩子中定义

TradingView is not defined in Vue mounted hook

javascript

vue.js

vue-component

vuejs2

tradingview-api