Vue.js 2: Conditional Rendering not working

Question

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.

'Not one single example is working' > care to provide the specifics of how your output differs from what you expect? — Pineda
– Pineda, Commented Apr 14, 2017 at 16:06
Bootstrap alert either appears regardless of whether there are folders, or not at all. — Wayne Smallman
– 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
– Wayne Smallman, Commented Apr 14, 2017 at 20:35

Egor Stambakio · Accepted Answer · 2017-04-15 08:16:19Z

3

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.

edited Apr 15, 2017 at 8:16

answered Apr 14, 2017 at 16:29

Egor Stambakio

18.2k5 gold badges37 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

13 Comments

Wayne Smallman Over a year ago

Hi, there were no errors in the console. However, since refactoring the code to match your suggestion, I'm getting multiple errors:

[Vue warn]: Property or method "folder" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option. (found in <Root>)

and: [Vue warn]: Error in render function: (found in <Root>) and: TypeError: Cannot read property 'title' of undefined

Wayne Smallman Over a year ago

It's worth noting that I kept the original template value: template: '#template-folder-item'.

Terry Over a year ago

@WayneSmallman It's up to you to decide what you want, but if you aren't getting a workable solution from the community even after a day it probably speaks volume of the quality and information available in your original question... or rather, the lack thereof. Providing an MCVE does no harm.

Terry Over a year ago

@WayneSmallman Have you looked at the asynchronous requests made available by JSFiddle? They have examples on the sidebar where you can use their API to generate fake AJAX responses.

Egor Stambakio Over a year ago

Look: jsfiddle.net/wostex/63t082p2/13 Is that what you need? 'Clear list' to make it empty, "Load list" to pretend loading in 1s.

|

Collectives™ on Stack Overflow

Vue.js 2: Conditional Rendering not working

1 Answer 1

13 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

13 Comments

Related