Struggling to understand how to implement a loop within another loop in Vue? This task might seem simple with React, but Vue presents its own challenges when it comes to using loops with arrays in templates/JSX.
The input data follows a specific format from the server. However, the code snippet provided below is currently not functional due to syntax errors.
Could you assist me in resolving these errors? It would greatly aid my comprehension of correctly applying nested loops in Vue templates...
const timeStamp = moment(new Date());
var app = new Vue({
el: "#app",
template: "#app-template",
data: {
symbols: [
{
id: 1,
name: "EURUSD",
candles: [
{
timeStamp: timeStamp.subtract(1, "days").format("YYYY-MM-DD"), // Yesterday
open: 1.1,
close: 1.2,
high: 1.3,
low: 1.0,
},
{
timeStamp: timeStamp.format("YYYY-MM-DD"), // Today
open: 1.2,
close: 1.5,
high: 1.6,
low: 1.2,
}
]
},
{
id: 2,
name: "USDRUB",
history: [
{
timeStamp: timeStamp.subtract(1, "days").format("YYYY-MM-DD"), // Yesterday
open: 75,
close: 76,
high: 77,
low: 73,
},
{
timeStamp: timeStamp.subtract(1, "days").format("YYYY-MM-DD"), // Today
open: 76,
close: 77,
high: 79,
low: 75,
}
]
}
]
}
});<script src="https://momentjs.com/downloads/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script type="text/x-template" id="app-template">
<table>
<thead>
<tr>
<th>Symbol</th>
<th>Change</th>
<th>Time stamp</th>
</tr>
</thead>
<tbody>
<tr v-for="(symbol, index) in symbols" :key="index">
{
symbol.candles.map(candle => {
const { name } = symbol
const { open } = candle.history[0]
const { close, timeStamp } = candle.history[1]
const change = Number.parseFloat((100 / (open / (close - open)))).toFixed(2)
return (
<td>{{ name }}</td>
<td>{{ change }} %</td>
<td>{{ timeStamp }}</td>
)
})
}
</tr>
</tbody>
</tabel>
</script>