Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 360
Wayne Smallman Avatar asked Apr 14 '17 15:04

Wayne Smallman


People also ask

Is Vue 2 still supported?

Vue 2 has now entered maintenance mode: it will no longer ship new features, but will continue to receive critical bug fixes and security updates for 18 months starting from the 2.7 release date. This means Vue 2 will reach End of Life by the end of 2023.

How do I apply conditional condition in Vue?

In VueJs, we can simply write a conditional class by binding it, and to do so all we need to do is to use the v-bind:class we can also write it in the short form as :class Both are applicable and will do the same work.

Does V-if destroy component?

v-if is "real" conditional rendering because it ensures that event listeners and child components inside the conditional block are properly destroyed and re-created during toggles.

What is the difference between V-if and V-show?

The key difference is that v-if conditionally renders elements and v-show conditionally displayselements. This means that v-if will actually destroy and recreate elements when the conditional is toggled. Meanwhile, v-show will always keep the element in the DOM and will only toggle its display by changing its CSS.


1 Answers

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.

like image 164
Egor Stambakio Avatar answered Sep 28 '22 08:09

Egor Stambakio