我正在执行一个显示Vue组件的视图,该视图必须显示对应于4种加密货币(BTC,ETH,EOS和XRP)的4个Tradingview图形。问题在于,我只能显示四个图形中的一个图形,而只能显示该数组最后一个加密除法的图形。
该视图应显示以下内容:
但是它只显示一个图形:
这是执行所有操作的组件代码:
<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"/> Bittrex
<input class="form-check-input"
type="radio"
id="binnace"
name="binance"
value="binance"
v-model="queryExchange.picked"
checked> 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