时间戳

首页 > 解决方案 > 在调整大小事件上更新 Vue 模板

vuejs2 - 在调整大小事件上更新 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返回值应该改变。

标签： vuejs2

解决方案

我不完全确定这是如何解决问题的，但是：

numberOfMovies = 0;

MoviesInRows() {
  this.numberOfMovies = Math.floor((window.innerWidth - 24) / 185);
  return chunk(TrackedMoviestStore.state.trackedMovieList, this.numberOfMovies);
}

现在，当我调整屏幕大小时，模板会正确更新。

推荐阅读