Vue.js 2: 조건부 렌더링이 작동하지 않음

Vue.js 2: 조건부 렌더링이 작동하지 않음

조건부 렌더링에 문제가 있습니다.하나의 예도 작동하지 않습니다.

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

용도가 아니에요.스스로 링크하는 것보다 어떤 식으로든 초기화하는 것이 좋습니다.이해가 안 돼.

다음 바이올린을 확인해 주세요.https://jsfiddle.net/wostex/63t082p2/10/

잘 되고 있어요.버튼을 클릭하여 스위치를 전환할 수 있습니다.

콘솔 오류 출력을 살펴봐야 할 것 같습니다.내 생각엔 닫는 곱슬머리 끈이 어디엔가 빠진 것 같아.

언급URL : https://stackoverflow.com/questions/43415091/vue-js-2-conditional-rendering-not-working