Vue.js 2: Conditional Rendering not working
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.
Wayne Smallman
Updated on June 09, 2022Comments
-
Wayne Smallman almost 2 years
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.