Vue 停止跟踪数组变化

Question

所以我试图通过删除我不想在某些屏幕尺寸的页面上显示的项目来更改数组。它工作正常，我的数组已正确更新，但过了一会儿 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>

Answer 1

我在周末设法解决了这个问题，我将错误的 "modified array" 推到了我正在循环的新列表中。

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

但现在已经修复了。

Vue 停止跟踪数组变化

Vue stops tracking array changes

javascript

vue.js

nuxt.js