2

我正在做一个显示 Vue 组件的视图，该视图必须显示对应于 4 种加密货币（BTC、ETH、EOS 和 XRP）的 4 个交易视图图。问题是我只能显示四个中的一个图形，并且只显示数组的最后一个密码分部的图形。

该视图应显示：

在此处输入图像描述

但它只向我显示了一个图形：

在此处输入图像描述

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

<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

4

0 回答 0