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

时间:2015-11-27 19:11:13

标签: javascript vue.js

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

这可能很简单,但我无法弄明白?

2 个答案:

答案 0 :(得分:6)

看起来v-forv-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/

答案 1 :(得分:1)

来自docs

  

v-else 元素必须紧跟 v-if v-else-if 元素 - 否则它将不会识别。

另见this

  

请注意, v-show 不支持<template>语法,也不支持 v-else