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停止跟蹤陣列變化

回答

相關問題