Vue视图中的TrandingView小部件

时间:2018-06-20 23:51:14

标签: vue.js vuejs2 tradingview-api

我正在执行一个显示Vue组件的视图,该视图必须显示对应于4种加密货币(BTC,ETH,EOS和XRP)的4个Tradingview图形。问题在于,我只能显示四个图形中的一个图形,而只能显示该数组最后一个加密除法的图形。

该视图应显示以下内容:

enter image description here

但是它只显示一个图形:

enter image description here

这是执行所有操作的组件代码:

<template>
  <div class="container">
    <br>
    <form class="form-inline" action="POST" v-on:submit.prevent>
        <table>
            <tr>
                <td style="font-weight:bold; width:200px;">Exchange</td>
                <td style="width:250px;">
                    <input class="form-check-input"
                           type="radio" 
                           id="bittrex"
                           name="bittrex" 
                           value="bittrex"
                           v-model="queryExchange.picked"/> &nbsp;Bittrex
                    <input class="form-check-input"
                           type="radio" 
                           id="binnace"
                           name="binance"
                           value="binance"
                           v-model="queryExchange.picked" 
                           checked> &nbsp;Binance
                </td>

            </tr>
            <tr><td colspan="4" style="height:20px"></td></tr>
            <tr>
                <td style="font-weight:bold; width:200px;">Intervalo:</td>
                <td>
                    <select id="Intervalo" name="Intervalo" v-model="queryExchange.interval">
                        <option value="W">1 Semana</option>
                        <option value="D">1 Día</option>
                        <option value="240">4 Hrs</option>
                        <option value="60">1 Hr</option>
                        <option value="30">30 min</option>
                        <option value="15">15 min</option>
                        <option value="5">5 min</option>
                    </select>
                </td>
            </tr>
            <tr><td colspan="4" style="height:20px"></td></tr>
            <tr>
                <td style="font-weight:bold; width:200px;">
                    <button type="button" class="btn btn-primary"  
                            v-on:click="queryForm()">
                            Mostrar
                    </button>
                </td>
            </tr>
            <tr><td colspan="4" style="height:20px"></td></tr>
        </table>
    </form>
    <div id="contenedor">

    </div>
</div>

<script>
  export default {
  data () {
    return {
         queryExchange: {
             picked: 'binance',
             interval: '60',
         },
         cryptoCurrency: ['BTC', 'ETH', 'EOS', 'XRP']
      }
   },
   methods: {
      queryForm(){
          let exchangeSelect = this.queryExchange.picked.toUpperCase();
          let intervalSelect = this.queryExchange.interval;
          this.cryptoCurrency.forEach(element => {
            new TradingView.widget(
                {
                    "width": 400,
                    "height": 300,
                    "symbol": exchangeSelect+':'+element+'BTC',
                    "interval": intervalSelect,
                    "timezone": "Etc/UTC",
                    "theme": "Dark",
                    "style": "1",
                    "locale": "en",
                    "toolbar_bg": "#f1f3f6",
                    "allow_symbol_change": true,
                    "enable_publishing": false,
                    "save_image": false,
                    "hideideas": true,
                    "container_id": "contenedor"
                }
              );
          });
        }
      }
   }
 </script>

到目前为止,我找不到错误,我占据了Laravel 5.6和Vuejs 2

0 个答案:

没有答案