javascript - TradingView 未在 Vue 挂载钩子(Hook)中定义

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>