下面是我一个组件的代码。在首次进入这个组件的时候，调用checkBranch这个方法，会把branchPhases数据更新了，页面也是会刷新的。但是当我跳转到newPhase组件后再跳转回来，branchPhases这个数据能够更新，但是template里面对应的for循环的div并没有刷新(id为sidebar的div)。
我debug发现processContent这个方法确实调用了，使用的也是更新的数据，但是页面上并没有刷新效果。而且点击不同的class="ui piled segment"这个div的时候，获取的数据虽然不同，但是sidebar都不会再刷新了。请问会是什么原因呢？
UI组件我使用的是semanticUI。
var storyLineTab = ponent('story-line', {
template: '
\\\\
{{ phase.content }}
\
\
{{ formatDate(phase.createdDate) }}·{{phase.author}} \
{{phase.like ? phase.like : \"\"}} Likes \
\
\
\ \ \\
\
{{processContent(branchPhase.content)}} \
\
\
\
\
\\\
要重写此节并开启新的故事线吗？ \
\\\ \ \\\\
\
No \
\\
\
Yes \
\ \ \ \',
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.$mit('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)
}
})
}
})
