Vue 停止跟踪数组更改答案

【问题标题】：Vue stops tracking array changesVue 停止跟踪数组更改
【发布时间】：2017-11-27 00:39:10
【问题描述】：

所以我试图通过删除我不想在某些屏幕尺寸的页面上显示的项目来更改数组。它可以正常工作，并且我的数组已正确更新，但一段时间后 DOM 与数组不同步。

我会尽力解释...

我的原始数组位于数据对象中，因此它是反应式的，然后我通过执行以下操作在方法中克隆该数组：const clonedArray = this.list.slice(0)

然后我通过执行以下操作更改数据：const updateArray = clonedArray.splice(numberToSlice)

然后我将更新后的数组推送到一个新的数据对象上：this.newList = updateArray

该方法在页面调整大小时触发，numberToSlice 的变化取决于我们使用的浏览器大小。

我在 V-FOR 内的页面上显示我的数据以显示数组元素。

当我调整浏览器大小时，它工作了 3/4 次，然后页面上的项目消失了，但如果我查看 Vue 开发工具，数组仍在更新，但未显示在 DOM 或页面中。

我做错了什么吗？

感谢您的帮助，我已尽力解释这一点，但如果您需要其他任何信息，请告诉我。

<template>
  <div>
    <div class="container">
      <isotope :list="list" id="root_isotope" class="card-layout" :options='option'>
        <div class="article-card" v-for="element in newList" :key="element.id">
          <article-card></article-card>
        </div>
      </isotope>
    </div>
  </div>
</template>

<script>
  import ArticleCard from '~components/article-card.vue'

  export default {
    components: {
      ArticleCard
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.handleResize)
    },
  mounted() {
    window.addEventListener('resize', this.handleResize)
    this.handleResize()
  },
  methods: {
    handleResize: function() {
      if (screen.width < 1020) {
        this.multipleOf = 2
      } else if (screen.width < 1440) {
        this.multipleOf = 3
      } else {
        this.multipleOf = 4
      }
      this.checkingArray()
    },
    checkingArray: function() {
      // checking if the data thats returned is a multiple of 2, 3 or 4
      if (this.list.length % this.multipleOf === 0) {
        // display all of the items
        // if not slice array so it's a multiple of 2, 3 or 4
      } else {
        let numberToSlice = Math.floor(this.list.length / this.multipleOf) * this.multipleOf
        let clonedArray = this.list.slice(0)

        let alteredArray = clonedArray.splice(numberToSlice)
        this.newList = alteredArray

        console.log(this.newList)
      }
    }
  },
  data() {
    return {
      multipleOf: null,
      newList: [],
      list: [
        {
          name: 'Article 1',
          id: 1
        },
        {
          name: 'Article 2',
          id: 2
        },
        {
          name: 'Article 3',
          id: 3
        },
        {
          name: 'Article 4',
          id: 4
        },
        {
          name: 'Article 4',
          id: 5
        },
        {
          name: 'Article 4',
          id: 6
        },
        {
          name: 'Article 4',
          id: 7
        },

      ],
      selected: null,
      option: {
        masonry: {
          gutter: 40
        }
      }
    }
  },
</script>

【问题讨论】：

请显示此页面的代码。在 html 中对数组和 v-for 的操作
由于没有提供代码，很难知道问题出在哪里......但可以建议你检查vuejs.org/v2/guide/list.html#Array-Change-Detection
@OlegShleif 我已经在我的原始帖子中添加了代码

标签： javascript vue.js nuxt.js

【解决方案1】：

我在周末设法解决了这个问题，我将错误的“修改后的数组”推送到我正在循环的新列表中。

我不需要将拼接后的数组放入另一个变量中。所以我删除了let altered array（这些应该是我知道的常量），然后将this.newList = alteredArray 更改为this.newList = clonedArray ...不太清楚为什么这会使DOM 不同步？

但它现在已修复。

【讨论】：