Wie kann ich berechnete Eigenschaften von Methoden erhalten?

Question

Zuerst benutze ich this Modul, um unendlich laden in Vue.

Um jedes Belastungselement hinzufügen, ich json Daten von meinem API-Server gestellt Daten Objekt, und ich spare die Arrays auf die Variablen wieder, nachdem ich das Array in Gruppen, die die Größe von ‚4‘ aufteilt. aber die Sache ist, dass es Elemente mit Methode Ereignishandler anfügt, die keine Variable von der Computereigenschaft erhalten kann. Ich bin ziemlich neu in Vue und konnte keine Informationen darüber finden. Hier ist Code!

export default { 
    name: 'main', 

    data:() => ({ 
    items: [], 
    line: [] 
    }), 

    async created() { 
    this.items = await fetch('/videos').then(res => res.json()) 
    }, 

    computed: { 
     columns: function() { 
      return chunk(this.items, 4) 
     } 
    }, 

    methods: { 
    onInfinite() { 
     setTimeout(() => { 
     const temp = [] 
     const len = this.columns.length 
     for (let i = len + 1; i <= len + 5; i++) { 
      temp.push(this.columns[i]) 
      console.log(this.columns[i]) //It prints 'undefined' 
     } 

     this.list = this.list.concat(temp) 
     this.$refs.myRefName.$emit('$InfiniteLoading:loaded') 

     }, 700) 
    }, 
    }, 
    components: { 
    InfiniteLoading 
    } 
} 

Answer 1

const len = this.columns.length // length of `columns` array 

Nächste Zeile:

for (let i = len + 1; i <= len + 5; i++) { 
    ...this.columns[i] 

Sie versuchen, den Zugriff auf Indizes über Länge des Arrays, die Werte offensichtlich nicht definiert sind.

Sie sollten wahrscheinlich nur eine Schleife durch columns wie folgt aus:

for (let column of columns) { 
    for (let item of column) { // asuming column is Array(4) 
     console.log(item) 

Es sollte funktionieren, wenn Ihr columns ein Array von ‚Brocken‘ Arrays mit 4 Elementen in jeweils.