我似乎无法让v-show和v-else工作。文档说:
v-else元素必须紧跟在v-if或v-show元素之后 - 否则将无法识别。
文档:http://vuejs.org/guide/conditional.html#v-show
小提琴:https://jsfiddle.net/p2ycjk26/2/
HTML:
<table>
<thead>
<tr>
<th>Heading</th>
</tr>
</thead>
<tbody>
<tr v-for="test in tests" v-show="tests.length">
<td>{{ test.name }}</td>
</tr>
<tr v-else>
<td>No data available in table</td>
</tr>
</tbody>
</table>
JavaScript的:
new Vue({
el: 'table',
data: {
tests: [{
name: 'Testing'
}, {
name: 'Testing 2'
}, {
name: 'Testing 3'
}]
}
});
这可能很简单,但我无法弄明白?
答案 0 :(得分:6)
看起来v-for
和v-else
不能很好地协同工作。我会将条件设置得更高(在<tbody>
上)并使用v-if
代替(这样,您就不会有两个<tbody>
元素):
<table>
<thead>
<tr>
<th>Heading</th>
</tr>
</thead>
<tbody v-if="tests.length">
<tr v-for="test in tests">
<td>{{ test.name }}</td>
</tr>
</tbody>
<tbody v-else>
<tr>
<td>No data available in table</td>
</tr>
</tbody>
</table>
答案 1 :(得分:1)