I can't seem to get v-show and v-else to work. The documentation says:

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

Documentation: 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'

        }]

    }

});

It's probably something simple but I can't quite figure it out?