Question

编辑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包进行分页的filterCruises分页。因此，如果可以的话，我只是想将两者合并。

原始问题

只需快速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">

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

Answer 1

其中任何一个：

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

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

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

Answer 2

我不知道您是要对已过滤的巡视进行分页还是对已分页的巡视进行过滤，但是解决方案很简单：使用一个v-for。具有计算属性，可以满足您的需求。

编辑：改进示例

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

  export default {
    data: _ => ({
      cruises: [],
      search: '',
      paginate: ['cruises'],
      db: firebase.database(),
      ref: this.db.ref('cruises'),
      query: this.ref.on('child_added', this.updateCruises)
    }),

    computed: {
      filteredCruises () {
        return this.cruises.filter({title} => {
          return new RegExp(this.search, 'i').test(title)
        })
      }
    },

    methods: {
      updateCruises (snapshot) {
        this.cruises.push(snapshot.val())
      }
    }
  }
</script>

<input v-model="search">

<paginate
  name="cruises"
  :list="filteredCruises"
  :per="5"
>
  <section v-for="cruise in paginated('cruises')">
    {{ cruise.title }}
  </section>
</paginate>

一条线上有多个v-for

2 个答案: