Javascript v-取决于标签
我在使用非常简单的vue.js-app时遇到问题。我有一个推荐人列表，我想迭代该列表，并将来自ajax请求的数据附加到每个条目上。当我试图显示该列表时，如果我在Javascript v-取决于标签,javascript,vue.js,vuejs2,Javascript,Vue.js,Vuejs2,我在使用非常简单的vue.js-app时遇到问题。我有一个推荐人列表，我想迭代该列表，并将来自ajax请求的数据附加到每个条目上。当我试图显示该列表时，如果我在span-元素上使用v-for，它可以正常工作，但是如果我使用div而不是span，它会断开。为什么它和div分开了 以下是一个简化的示例： <html> <head> <meta charset="utf-8"> <script src="https://cdnjs.cloudf
spanv-fordivspan<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}}
<!-- If I use span here, everything works just fine -->
<span v-for="match in referee.matches">{{match.date}}</span>
<!-- But if I switch to div, it no longer works -->
<!--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>
姓名：{{仲裁人姓名}}
比赛计数：{{裁判.比赛.长度}
{{match.date}
让我的裁判=[
{名称：“裁判员1”}，
{名称：“裁判员2”}，
{名称：“裁判员3”}，
];
$（文档）.ready（函数（）{
var app=新的Vue({
el:“#应用程序”，
数据：{
裁判员：[]，
},
已创建：函数（）{
对于（我的裁判中的裁判）{
裁判。比赛=[]；
让匹配项=[
{日期：“日期1”}，
{日期：“日期2”}，
{日期：“日期3”}，
];
for（让一对一配对）{
裁判、比赛、推({
日期：match.date，
});
}
这个。裁判员。推（裁判员）；
}
},
});
});
fiddle和示例代码都是有效的，但是如果您更改
spandivpdiv<body>
<div id="app">
<div v-for="referee in referees">
Name: {{referee.name}}<br>
Match count: {{ referee.matches.length}}
<!-- If I use span here, everything works just fine -->
<div v-for="match in referee.matches">{{match.date}}</div>
<!-- But if I switch to div, it no longer works -->
<!--div v-for="match in referee.matches">{{match.date}}</div-->
</div>
</div>
</body>
姓名：{{仲裁人姓名}}
比赛计数：{{裁判.比赛.长度}
{{match.date}
您不能让
divppdiv<body>
<div id="app">
<div v-for="referee in referees">
Name: {{referee.name}}<br>
Match count: {{ referee.matches.length}}
<!-- If I use span here, everything works just fine -->
<div v-for="match in referee.matches">{{match.date}}</div>
<!-- But if I switch to div, it no longer works -->
<!--div v-for="match in referee.matches">{{match.date}}</div-->
</div>
</div>
</body>
姓名：{{仲裁人姓名}}
比赛计数：{{裁判.比赛.长度}
{{match.date}
在
pdiv