Question

首先，我使用this模块在Vue中进行无限加载。

要在每次加载时添加元素，我将来自API服务器的json数据放到数据对象，然后在将数组拆分为＆＃39大小的组后再次将数组保存到变量中; 4＆＃39 ;.但问题是它使用方法事件处理程序追加元素，它不能从计算机属性获取任何变量。我对Vue很陌生，但我找不到任何关于此的信息。这是代码！

 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

下一行：

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

您正在尝试访问数组长度以上的索引，这些值显然是未定义的。

你应该像这样循环columns：

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

如果你的columns是一个'chunk'数组，每个数组中包含4个元素，它应该可以工作。

Answer 2

您使用此关键字来获取像这样的计算方法：

item.push(this.column[i]);

如何从方法中获取计算属性？

2 个答案: