Question

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

我会尝试解释......

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

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

然后我通过执行以下操作将更新的数组推送到新数据对象：this.newList = updateArray

该方法在页面调整大小时触发，numberToSlice更改取决于我们所依赖的浏览器大小。

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

当我调整浏览器大小时，它会工作3/4次，然后页面上的项目消失，但如果我查看Vue dev工具，阵列仍在更新，但不会显示在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

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

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

但它现在已经修复了。

Vue停止跟踪数组更改

1 个答案: