Vue.js v-show 和 v-else 没有按预期工作？

Question

我似乎无法让 v-show 和 v-else 工作。文档说：

The v-else element must following immediately after the v-if or v-show element - otherwise it will not be recognized.

文档：http://vuejs.org/guide/conditional.html#v-show

Fiddle: 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

来自docs

A v-else element must immediately follow a v-if or a v-else-if element - otherwise it will not be recognized.

另见 this

Note that v-show doesn’t support the <template> syntax, nor does it work with v-else.

Vue.js v-show 和 v-else 没有按预期工作？

Vue.js v-show and v-else not working as intended?

javascript

vue.js