I'm brand new to working with vue.js.
I've been attempting to display a v-for in the middle of a table on my webpage, but despite no error messages being shown, my element isn't showing up as intended.
I can confirm that my data is being properly rendered on the page as I can inspect it using the vue.js development tools.
Could someone help point out where I might have made a mistake? If there were any errors reported in the console, I could troubleshoot from there, but unfortunately, it's not providing any feedback.
This is the code I am using:
<template v-for="item in dashboardData.items">
<tr>
<td class="position">{}{item.position}}</td>
<td>{{item.salespersonname}}</td>
<td>{{item.units_week1}}</td>
<td>{{item.weeklytargetform_week1}}</td>
<td>{{item.targetstreak}}</td>
<td>£{{item.targetsales}}</td>
<td>£{{item.actualsales}}</td>
<td>{{item.points}}</td>
<td>{{item.performancelevel}}</td>
</tr>
</template>
Additionally, this is my script:
<script>
$.get("https://xxxxx.co.uk/reporting/dashboards/team/detailed/week", function(
data
) {
var dataItems = data.items;
var vm = new Vue({
el: "#main",
data: {
dashboardData: dataItems
}
});
});
</script>