我在使用 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
被隐藏,而第二个仍然可见。因此,无论发生什么,都会覆盖代码试图产生的任何行为。
最佳答案
提供数据模板后更新:
https://jsfiddle.net/wostex/63t082p2/13/
....
data
部分有一段奇怪的代码:
data: {
foldersList: this.foldersList,
foldersStatus: this.foldersStatus
},
这不是它的使用方式。您最好以某种方式对其进行初始化,而不是将其自链接到自身。这没有意义。
检查这个 fiddle :https://jsfiddle.net/wostex/63t082p2/10/
它工作正常。您可以通过单击按钮来切换开关。
我猜你应该看看控制台错误输出。我的猜测是某处缺少右大括号。
关于javascript - Vue.js 2 : Conditional Rendering not working,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43415091/