[Vuejs]-Vue – how can i render a script inside a component template?

by

2👍

✅

I think, you should move <script> part to yours vue script, for example under mounted lifecycle stage:

<template>
  <div id="myComponent">
    <div class="col-md-6">
      <div class="main-chart mb15">
        <div class="tradingview-widget-container">
          <div id="tradingview_e8053"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    new TradingView.widget(
    {
      "width": "100%",
      "height": 450,
      "symbol": "BINANCE:BTCUSDT",
      "interval": "D",
      "timezone": "Etc/UTC",
      "theme": "Dark",
      "style": "1",
      "locale": "en",
      "toolbar_bg": "#f1f3f6",
      "enable_publishing": false,
      "withdateranges": true,
      "hide_side_toolbar": false,
      "allow_symbol_change": true,
      "show_popup_button": true,
      "popup_width": "1000",
      "popup_height": "650",
      "container_id": "tradingview_e8053"
  }
}
</script>

And script load <script src="https://s3.tradingview.com/tv.js"></script> you should add to yours index.html file or somewhere else, outside vue templates.

👤Leszek Mazur

1👍

<!DOCTYPE html>
<html>
<head>
  <title>My first Vue app</title>
  <script src="https://unpkg.com/vue"></script>
  <script src="https://s3.tradingview.com/tv.js"></script>
</head>
<body>
 
    <div id="myComponent">
    </div>
  
  <script>

    new Vue({
      el: '#myComponent',
      data: {
  
      },
      mounted: function(){
         new TradingView.widget(
        {
          "width": "100%",
          "height": 450,
          "symbol": "BINANCE:BTCUSDT",
          "interval": "D",
          "timezone": "Etc/UTC",
          "theme": "Dark",
          "style": "1",
          "locale": "en",
          "toolbar_bg": "#f1f3f6",
          "enable_publishing": false,
          "withdateranges": true,
          "hide_side_toolbar": false,
          "allow_symbol_change": true,
          "show_popup_button": true,
          "popup_width": "1000",
          "popup_height": "650",
          "container_id": "tradingview_e8053"
        }
      );
      }
    })
  </script>

</body>
</html>
👤Daniil Loban

Leave a comment