In the widget, the value of the "symbol" attribute needs to be dynamic based on the selected currency pair from the list. In the Vue.js file, the value of the currency pair is stored in the "symbol" variable. I am trying to pass this variable value from the Vue file to regular HTML so that it can be used later. The following are code snippets from both the Vue.js and HTML files:
<select v-model="currSymbol" @change="event => socket.emit('symbol:change', {symbol: currSymbol, interval: currInterval})">
<option v-for="pair in pairs">
{{ pair.symbol }}
</option>
HTML file:
<div id="app">
<div class="tradingview-widget-container">
<div class="tradingview-widget-container__widget"></div>
</div>
</div>
<script type="text/javascript" src="https://s3.tradingview.com/tv.js"></script>
<script type="text/javascript">
new TradingView.widget(
{
"width": 1000,
"symbol": "{{ symbol }}",
"interval": "D",
"timezone": "Etc/UTC",
"theme": "light",
"style": "1",
"locale": "en",
"toolbar_bg": "#f1f3f6",
"enable_publishing": false,
"allow_symbol_change": true,
"container_id": "tradingview_02e7f"
}
);
</script>
I am facing challenges in transferring the value between these files.