vue.js - v-for嵌套v-for问题
本文介绍了vue.js - v-for嵌套v-for问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="../vue.js"></script>
</head>
<body>
<table class="demo">
<tr is="my-tr" v-for="trItem in trItems">
<td is="my-td" v-for="tdItem in trItem.tdItems">
{{ tdItem.number }}
</td>
</tr>
</table>
<script>
var aTr = {
template: '<tr></tr>'
},
aTd = {
template: '<td></td>'
};
var demo = new Vue({
el: '.demo',
data: {
trItems: [
{
tdItems: [{ number: 1 },{ number: 2 },{ number: 3 }]
},
{
tdItems: [{ number: 4 },{ number: 5 },{ number: 6 }]
},
{
tdItems: [{ number: 7 },{ number: 8 },{ number: 9 }]
}
]
},
components: {
'my-tr': aTr,
'my-td': aTd
}
});
</script>
</body>
</html>可是td没出来
诸位前辈帮看看是哪里错了
解决方案
首先，两个组件中要加 slot 插槽才能实现内容分发！
其次，tr 里加 slot 的时候，由于 HTML 对 tr 内可插入元素的限制，里面的 slot 会被移走。
因此，首先把 aTd 的模板改为 <td><slot></slot></td>，然后再把 <tr is="my-tr" v-for="trItem in trItems"> 中的 is="my-tr" 去掉就可以了。
以上是 Vue.js 1.0 的情况。
由于 Vue.js 2.0 中使用 Virtual DOM 通过 render 函数处理模板，因此不受 HTML 对 tr 内可插入元素的限制影响，只要在两个模板都加上 slot 就可以了。
var aTr = {
template: '<tr><slot></slot></tr>'
},
aTd = {
template: '<td><slot></slot></td>'
};这篇关于vue.js - v-for嵌套v-for问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
