vue.js数据更新页面不刷新

nasuf
  • 553

下面是我一个组件的代码。在首次进入这个组件的时候,调用checkBranch这个方法,会把branchPhases数据更新了,页面也是会刷新的。但是当我跳转到newPhase组件后再跳转回来,branchPhases这个数据能够更新,但是template里面对应的for循环的div并没有刷新(id为sidebar的div)。
我debug发现processContent这个方法确实调用了,使用的也是更新的数据,但是页面上并没有刷新效果。而且点击不同的class="ui piled segment"这个div的时候,获取的数据虽然不同,但是sidebar都不会再刷新了。请问会是什么原因呢?
UI组件我使用的是semanticUI。

var storyLineTab = Vue.component('story-line', {
    
    template: ' <div id="storyLine"> \
                    <div style="margin-top:20px; margin-bottom:20px" class="ui list"> \
                        <div class="ui container"> \
                            <div class="ui piled segment" v-for="(phase, index) in phases" style="margin-top:5px; margin-bottom:15px" @click="checkBranches(phase, index)"> \
                                <p>{{ phase.content }}</p> \
                                <h> \
                                    <font color="grey">{{ formatDate(phase.createdDate) }}&nbsp;&nbsp;·&nbsp;&nbsp;{{phase.author}}</font>&nbsp;&nbsp;&nbsp;&nbsp; \
                                    <span class="left floated like"><font color="grey"><i class="like icon"></i> {{phase.like ? phase.like : \"\"}} Likes </font></span>&nbsp;&nbsp; \
                                    <span class="right floated star" v-if="phase.branchPhases && phase.branchPhases.length > 1"><font color="grey"><i class="sitemap icon"></i> </font></span> \
                                </h> \
                            </div> \
                        </div> \
                    </div> \
                    <div id="sidebar" class="ui right demo vertical inverted sidebar labeled icon menu"> \
                      <a class="item" v-for="branchPhase in branchPhases" style="text-align: left" @click="loadBranchLine(branchPhase)"> \
                            {{processContent(branchPhase.content)}} \
                      </a> \
                      <a class="item" @click="routeToNewPhaseTab()"> \
                            <i class="block add circle icon"></i> \
                      </a> \
                    </div> \
                    <div id="createNew" class="ui basic modal"> \
                      <div class="header"> \
                        要重写此节并开启新的故事线吗? \
                      </div> \
                      <div class="image content"> \
                        <div class="description"> \
                        </div> \
                      </div> \
                      <div class="actions"> \
                        <div class="two fluid ui inverted buttons"> \
                          <div class="ui cancel red basic inverted button"> \
                            <i class="remove icon"></i> \
                            No \
                          </div> \
                          <div class="ui ok green basic inverted button" @click="routeTo(\'newPhaseTab\')"> \
                            <i class="checkmark icon"></i> \
                            Yes \
                          </div> \
                        </div> \
                      </div> \
                    </div> \
                </div>',
    
    data: function() {
        return {
            phases: new Array(),
            branchPhases: [],
            selectedPhaseIndex: '',
            selectedPhase: ''
        }
    },
    
    methods: {
        
        formatDate: function(value) {
            var date = new Date();
            date.setTime(value);
            var year = date.getYear() + 1900;
            var month = date.getMonth() + 1;
            if(month < 10) month = '0' + month;
            var day = date.getDate();
            if(day < 10) day = '0' + day;
            return year + "-" + month + "-" + day;
        },
        
        checkBranches: function(phase, index) {
            debugger;
            if (phase.branchPhases && phase.branchPhases.length > 1) {
                this.selectedPhase = phase;
                var url = "/story/phases";
                var _self = this;
                axios.get(url, {
                    params: {
                        phaseIds: phase.branchPhases.join(',')
                    }
                }).then(function(response){
                    if (response.data.status == 'success') {
                        debugger;
                        // 页面重新跳转回来的时候,这个branchPhases数据内容确实刷新了,但是页面的sidebar并没有刷新。
                        _self.branchPhases = response.data.data;
                        _self.toggleSideBar();
                        _self.selectedPhaseIndex = index;
                    }
                }) 
                
            } else {
                this.selectedPhase = phase;
                $('#createNew')
                  .modal('show');
            }
        },
        
        processContent: function(content) {
            debugger;
            if (content && content.length > 20) {
                return content.substr(0, 15) + '...';
            } else {
                return content;
            }
        },
        
        loadBranchLine: function(branchPhase) {
            debugger;
            var url = "/story/story/phases/" + branchPhase.id;
            var _self = this;
            axios.get(url).then(function(response) {
                debugger;
                if (response.data.status == 'success') {
                    var subPhases = response.data.data;
                    var originPhases = _self.phases.splice(0, _self.selectedPhaseIndex);
                    originPhases.push(branchPhase);
                    for (var i in subPhases) {
                        originPhases.push(subPhases[i]);
                    }
                    _self.phases = originPhases;
                    _self.toggleSideBar();
                }
            })
        },
        
        toggleSideBar: function() {
            $('#sidebar')
              .sidebar('toggle');
        },
        
        routeToNewPhaseTab() {
            this.toggleSideBar();
            $('#createNew')
              .modal('show');
        },
        
        routeTo: function(tabName) {
            //router.push(tabName)
            debugger;
            this.$store.commit('updateParentPhase', this.selectedPhase);
            this.$parent.routeTo(tabName)
        }
        
    },
    
    beforeCreate: function() {
        debugger;
        var storyLineDiv = document.getElementById("storyLine");
        if (storyLineDiv) {
            storyLineDiv.removeChild(document.getElementById("sidebar"));
        }
        debugger;
        var url = "/story/story/phases/" + this.$store.state.topPhase.id;//this.$route.query.parentPhaseId;
        var _self = this;
        this.branchPhases = [];
        axios.get(url).then(function(response) {
            debugger;
            if (response.data.status == 'success') {
                _self.phases = response.data.data;
                //_self.phases.splice(0,0,_self.$route.query.parentPhase)
                //_self.phases.splice(0,0,_self.$store.state.topPhase)
            }
        })
    }
})
评论
阅读 10.2k
3 个回答
✓ 已被采纳

自问自答吧,找到了原因,应该是semanticUI的问题。里面的sidebar组件强制了html的结构, 如下:

<body>
  <div class="ui sidebar">
    ...
  </div>
  <div class="pusher">
    Your site's actual content
  </div>
</body>

所以每次生成的html中,sidebar并不在vue作用的div里面。
可以在每次创建sidebar的时候做如下处理:

var sidebar = document.getElementById("sidebar");
if (sidebar) {
    document.getElementsByTagName('body')[0].removeChild(sidebar);
}

这样就不会出现这个问题了。

由于 JavaScript 的限制, Vue 不能检测以下变动的数组:
当你利用索引直接设置一个项时,例如: vm.items[indexOfItem] = newValue
当你修改数组的长度时,例如: vm.items.length = newLength

我想是因为你的vue的请求没有匹配到后端的URL 所以模板渲染没有值
或者是你的vue更新数据时,没有做保存更新 导致 后端获取的还是原来的值

撰写回答

登录后参与交流、获取后续更新提醒

宣传栏