TradingView 没有在 Vue 挂载的钩子中定义答案

【问题标题】：TradingView is not defined in Vue mounted hookTradingView 没有在 Vue 挂载的钩子中定义
【发布时间】：2019-03-15 10:53:05
【问题描述】：

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

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

挂载钩子错误：“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？

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component tradingview-api

【解决方案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>

【讨论】：

【解决方案2】：

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

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

【讨论】：