I'm facing an issue with a basic vue.js application. I have a list of referees and I need to iterate through that list and add data from an ajax request to each item. Strangely, when I try to display the list using v-for on a span element, it works perfectly fine. However, if I use a div instead of a span, it breaks. I'm curious as to why it breaks specifically with a div?
Here's a simplified example:
<html>
<head>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.4.4/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div id="app">
<p v-for="referee in referees">
Name: {{referee.name}}<br>
Match count: {{ referee.matches.length}}
<!-- Using span here works perfectly -->
<span v-for="match in referee.matches">{{match.date}}</span>
<!-- But changing to div causes issues -->
<!--div v-for="match in referee.matches">{{match.date}}</div-->
</p>
</div>
</body>
<script>
let myReferees = [
{ name: "Referee 1", },
{ name: "Referee 2", },
{ name: "Referee 3", },
];
$(document).ready(function () {
var app = new Vue({
el: '#app',
data: {
referees: [],
},
created: function () {
for(let referee of myReferees){
referee.matches = [];
let matches = [
{date: "date1"},
{date: "date2"},
{date: "date3"},
];
for(let match of matches){
referee.matches.push({
date: match.date,
});
}
this.referees.push(referee);
}
},
});
});
</script>
</html>
Check out this fiddle for a working demo: jsfiddle.net/vvu2f0m6/
The provided fiddle and code samples are functional, but switching from span to div will highlight the issue.