Vue.js 2：条件渲染不起作用

Question

我在使用 Conditional Rendering 时遇到问题，因为没有一个示例有效。

这是 Vue 代码：

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));
                }
            });
        }

以下是无效的 HTML 代码示例：

            <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>

...和：

            <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>

...和：

            <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>

我已经检查过了，foldersStatus 是正确的，所以我遗漏了一些东西。

更新

我发现了一些对我来说毫无意义的奇怪东西：

            <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>

在这里，第一个div 被隐藏，而第二个保持可见。所以无论发生什么都会推翻代码试图产生的任何行为。

Answer 1

提供数据模板后更新：

https://jsfiddle.net/wostex/63t082p2/13/

....

data 部分中有一个奇怪的代码：

 data: {
        foldersList: this.foldersList,
        foldersStatus: this.foldersStatus
    },

这不是它的使用方式。您最好以某种方式对其进行初始化，而不是将其自链接到自身。没有意义。

检查这个小提琴：https://jsfiddle.net/wostex/63t082p2/10/

它工作正常。您可以通过单击按钮来切换开关。

我猜你应该看看控制台错误输出。我的猜测是某处缺少右花括号。