33
rated 0 times
[
36]
[
3]
/ answers: 1 / hits: 18923
/ 7 Years ago, fri, april 14, 2017, 12:00:00
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.
More From » vuejs2
