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被隐藏，而第二个bucket_selector仍然可见。所以无论发生什么，都要推翻代码试图产生的任何行为。

Answer 1

提供数据模板后更新：

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

...

data: { foldersList: this.foldersList, foldersStatus: this.foldersStatus },部分中有一个奇怪的代码：

alert-fastlog.c

它不是如何使用的。您最好以某种方式初始化它，而不是将其自身链接到自身。这毫无意义。

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

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

我猜你应该看一下控制台错误输出。我的猜测是在某处错过了大括号。

Answer 2

你需要初始化你喜欢这个：

data {
  foldersList: '',
  foldersStatus: false // default value as false
}

然后您可以像这样呈现v-if语句：

v-if="foldersStatus"

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

2 个答案: