CODEWITHSUNDEEP
javascriptvuejs2
Wayne Smallman
Wayne Smallman

Reputation: 1720

Vue.js 2: Conditional Rendering not working

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

Here's the Vue code:

Vue.component('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.

Upvotes: 6

Views: 19182

Answers (1)

Egor Stambakio
Egor Stambakio

Reputation: 18126

Updated after data template was provided:

https://jsfiddle.net/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.net/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.

Upvotes: 3

Related Questions