Vue.js v-show和v-else无法按预期工作吗？

Question

我似乎无法让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'
        }]
    }
});

这可能很简单，但我无法弄清楚？

Answer 1

看起来像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>

https://jsfiddle.net/p2ycjk26/4/

Answer 2

从文档

一个V型别的元素必须紧跟一个V型，如果还是V-否则，如果元素-否则将无法识别。

也看到这个

请注意，v-show不支持<template>语法，也不适用于v-else。