Vueは配列の変更のトラッキングを停止します

Question

私は特定の画面サイズでページに表示したくない項目を削除して配列を変更しようとしています。それは動作し、私の配列は正しく更新されますが、しばらくするとDOMは配列と同期しなくなります。私はその後、データを変更const clonedArray = this.list.slice(0)

を：

私が説明しよう...

私の元の配列は、それが反応ですので、私はその後、実行してメソッド内でその配列のクローンを作成するデータオブジェクトであります実行して：this.newList = updateArray

をおよび方法は、ページのサイズ変更に発砲し、numberToSlice変更されていますconst updateArray = clonedArray.splice(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

私は週末にこれを解決することができました。間違った「変更された配列」を私がループしていた新しいリストにプッシュしていました。

スプライスされた配列を別の変数に入れる必要はありませんでした。だから私はlet altered array（これらは私が知っているconstsする必要があります）を削除し、 this.newList = clonedArrayに変更...これは、同期のDOMをノックしていた理由もあまり確かではない？

しかし、これで修正されました。