Vue停止跟踪阵列变化

所以我试图通过删除我不想在某些屏幕尺寸的页面上显示的项目来更改数组。它的工作原理和我的数组被正确更新，但一段时间后，DOM与数组不同步。Vue停止跟踪阵列变化

我会尽力解释...

我原来的数组是数据对象，因此它的反应，然后我做克隆方法中数组：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>

来源

2017-06-23 Jake K

请显示此页的代码。对数组和v-for的操作在html中 –

因为没有提供代码，所以很难知道问题出在哪里......但是可以建议您检查http://vuejs.org/v2/guide/list.html#Array - 更改 - 检测 –

@OlegShleif我在原始文章中添加了代码 –

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

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

但现在已修复。

来源

2017-06-26 16:18:50

Vue停止跟踪阵列变化

回答

相关问题