如何解决调整大小事件时更新Vue模板
我有一个组件,可以在其中创建一个包含其他数组的数组:
mounted() {
this.populateTrackedMoviesState();
window.addEventListener('resize',this.MoviesInRows);
return () => {
window.removeEventListener('resize',this.MoviesInRows);
};
}
MoviesInRows() {
const numberOfMovies = Math.floor((window.innerWidth - 24) / 185);
console.log(chunk(TrackedMoviestStore.state.trackedMovieList,numberOfMovies).length);
return chunk(TrackedMoviestStore.state.trackedMovieList,numberOfMovies);
}
这里发生的重要事情是,当我调整console.log
中MoviesInRows
的大小时,会显示正确的值。
在我的模板中,我基于MoviesInRows()
方法渲染电影列表:
<ul id="movieList" v-for='(movieRow,index) in MoviesInRows()' :key='index'>
<li
v-for='movie in movieRow'
:key='movie.id'>
<MovieInOverview :movie=movie />
{{ MoviesInRows().length }}
</li>
</ul>
尽管{{ MoviesInRows().length }}
中的console.log
显示返回值应该更改,但是MoviesInRows
从未改变。
解决方法
我不完全确定这是如何解决问题的,但是:
numberOfMovies = 0;
MoviesInRows() {
this.numberOfMovies = Math.floor((window.innerWidth - 24) / 185);
return chunk(TrackedMoviestStore.state.trackedMovieList,this.numberOfMovies);
}
现在,当我调整屏幕大小时,模板会正确更新。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。