vue.js数据更新页面不刷新
本文介绍了vue.js数据更新页面不刷新的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
下面是我一个组件的代码。在首次进入这个组件的时候，调用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) }} · {{phase.author}}</font> \
<span class="left floated like"><font color="grey"><i class="like icon"></i> {{phase.like ? phase.like : \"\"}} Likes </font></span> \
<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)
}
})
}
})
解决方案
自问自答吧，找到了原因，应该是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);
}这样就不会出现这个问题了。
这篇关于vue.js数据更新页面不刷新的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
