I'm having problems with Conditional Rendering, in that not one single example is working.

Here's the Vue code:

Vueponent('sub-folder', {
    props: ['folder'],
    template: '#template-folder-item'
});

var buildFoldersList = new Vue({
    el: '#sub-folders',
    data: {
        foldersList: this.foldersList,
        foldersStatus: this.foldersStatus
    },
    created () {
        this.buildFolders()
    },
    methods: {
        buildFolders: function () {
            var self = this;
            $.ajax({
                url: base_url + 'api/folder/get_subfolders/' + browser_folder_id,
                method: 'POST',
                data: {
                    "folder_id": browser_folder_id
                },
                success: function (data) {
                    console.log("Data"); console.log(data.result);
                    self.foldersList = data.result;
                    self.foldersStatus = ( data.result.length > 0 ) ? true : false;
                },
                error: function (error) {
                    self.foldersStatus = false;
                    alert(JSON.stringify(error));
                }
            });
        }

Here are the examples of HTML code that don't work:

            <div v-if="foldersStatus == true" class="list-group" id="sub-folders">
                <sub-folder v-for="folder in foldersList" :key="folder.folder_id" v-bind:folder="folder"></sub-folder>
            </div>
            <div v-else-if="foldersStatus == false" class="alert alert-info" role="alert">
                <strong>Hello!</strong> You don't have any Folders in here!
            </div>

... and:

            <div v-if="foldersStatus == true" class="list-group" id="sub-folders">
                <sub-folder v-for="folder in foldersList" :key="folder.folder_id" v-bind:folder="folder"></sub-folder>
            </div>
            <div v-if="foldersStatus == false" class="alert alert-info" role="alert">
                <strong>Hello!</strong> You don't have any Folders in here!
            </div>

... and:

            <div v-if="foldersStatus" class="list-group" id="sub-folders">
                <sub-folder v-for="folder in foldersList" :key="folder.folder_id" v-bind:folder="folder"></sub-folder>
            </div>
            <template v-else>
            <div class="alert alert-info" role="alert">
                <strong>Hello!</strong> You don't have any Folders in here!
            </div>
            </template>

I've checked, and foldersStatus is correct, so I'm missing something.

Update

I've found something strange which makes no sense to me:

            <div v-if="1 == 2" class="list-group" id="sub-folders">
                <sub-folder v-for="folder in foldersList" :key="folder.folder_id" v-bind:folder="folder"></sub-folder>
            </div>
            <div v-if="1 == 2" class="alert alert-info" role="alert">
                <strong>Hello!</strong> You don't have any Folders in here!
            </div>

Here, the first div is hidden while the second remains visible. So whatever is happening is overthrowing whatever behaviour the code is attempting to produce.

I'm having problems with Conditional Rendering, in that not one single example is working.

Here's the Vue code:

Vue.ponent('sub-folder', {
    props: ['folder'],
    template: '#template-folder-item'
});

var buildFoldersList = new Vue({
    el: '#sub-folders',
    data: {
        foldersList: this.foldersList,
        foldersStatus: this.foldersStatus
    },
    created () {
        this.buildFolders()
    },
    methods: {
        buildFolders: function () {
            var self = this;
            $.ajax({
                url: base_url + 'api/folder/get_subfolders/' + browser_folder_id,
                method: 'POST',
                data: {
                    "folder_id": browser_folder_id
                },
                success: function (data) {
                    console.log("Data"); console.log(data.result);
                    self.foldersList = data.result;
                    self.foldersStatus = ( data.result.length > 0 ) ? true : false;
                },
                error: function (error) {
                    self.foldersStatus = false;
                    alert(JSON.stringify(error));
                }
            });
        }

Here are the examples of HTML code that don't work:

            <div v-if="foldersStatus == true" class="list-group" id="sub-folders">
                <sub-folder v-for="folder in foldersList" :key="folder.folder_id" v-bind:folder="folder"></sub-folder>
            </div>
            <div v-else-if="foldersStatus == false" class="alert alert-info" role="alert">
                <strong>Hello!</strong> You don't have any Folders in here!
            </div>

... and:

            <div v-if="foldersStatus == true" class="list-group" id="sub-folders">
                <sub-folder v-for="folder in foldersList" :key="folder.folder_id" v-bind:folder="folder"></sub-folder>
            </div>
            <div v-if="foldersStatus == false" class="alert alert-info" role="alert">
                <strong>Hello!</strong> You don't have any Folders in here!
            </div>

... and:

            <div v-if="foldersStatus" class="list-group" id="sub-folders">
                <sub-folder v-for="folder in foldersList" :key="folder.folder_id" v-bind:folder="folder"></sub-folder>
            </div>
            <template v-else>
            <div class="alert alert-info" role="alert">
                <strong>Hello!</strong> You don't have any Folders in here!
            </div>
            </template>

I've checked, and foldersStatus is correct, so I'm missing something.

Update

I've found something strange which makes no sense to me:

            <div v-if="1 == 2" class="list-group" id="sub-folders">
                <sub-folder v-for="folder in foldersList" :key="folder.folder_id" v-bind:folder="folder"></sub-folder>
            </div>
            <div v-if="1 == 2" class="alert alert-info" role="alert">
                <strong>Hello!</strong> You don't have any Folders in here!
            </div>

Here, the first div is hidden while the second remains visible. So whatever is happening is overthrowing whatever behaviour the code is attempting to produce.

• javascript
• vuejs2

• 1 'Not one single example is working' > care to provide the specifics of how your output differs from what you expect? – Pineda Commented Apr 14, 2017 at 16:06
• Bootstrap alert either appears regardless of whether there are folders, or not at all. – Wayne Smallman Commented Apr 14, 2017 at 19:10
• I think the problem is that the Bootstrap alert is outside of the sub-folders element and therefore not controllable. – Wayne Smallman Commented Apr 14, 2017 at 20:35

1 Answer 1

Updated after data template was provided:

https://jsfiddle/wostex/63t082p2/13/

....

You have a strange code in data section:

 data: {
        foldersList: this.foldersList,
        foldersStatus: this.foldersStatus
    },

It's not how it's used. You'd better initialize it in some way rather than self-linking it to itself. It makes no sense.

Check this fiddle: https://jsfiddle/wostex/63t082p2/10/

It works fine. You can toggle switch by clicking a button.

I guess you should look at console errors output. My guess is there's missing closing curly brace somewhere.