时间戳

首页 > 解决方案 > 多个 v-for 在一行上

vue.js - 多个 v-for 在一行上

问题描述

编辑 1

这里是script

<script>
import firebase from '@/middleware/firebase'

const database = firebase.database()

export default {
  data: function () {
    return {
      cruises: [],
      search: '',
      paginate: ['cruises']
    }
  },
  mounted () {
    database.ref('cruises').on('child_added', snapshot => this.cruises.push(snapshot.val()))
  },
  computed: {
    filteredCruises: function () {
      var self = this;
      return this.cruises.filter(function(cruise) { 
        return cruise.title.toLowerCase().indexOf(self.search.toLowerCase()) >=0;
      })
    }
  }
}
</script>

我正在尝试对过滤后的巡航进行分页，我正在使用https://github.com/TahaSh/vue-paginate包进行分页。因此，如果可以的话，我只是尝试将两者合并。

原始问题

只是一个快速v-for查询。

是否可以合并

<section class="shadow p-4 h-32 mb-4" v-for="cruise in paginated('cruise')" :key="cruise.id">
<section class="shadow p-4 h-32 mb-4" v-for="cruise in filteredCruises" :key="cruise.id">

放在第一行，因为我需要调用分页函数和计算函数。

标签： vue.jsvuejs2

解决方案

这些中的任何一个：

<!-- ES6 array spread syntax -->
<section v-for="cruise in [...paginated('cruise'), ...filteredCruises]">

<!-- ES5 -->
<section v-for="cruise in paginated('cruise').concat(filteredCruises)">

如果您不想在标记中乱扔太多代码，则可以将其放入计算属性中。

推荐阅读