Vue.js 一条线路上的多个v形导线

编辑1

这是

脚本

<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>

因为我需要调用分页函数和计算函数。

以下任何一项：

---

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

我不知道您是在尝试对已筛选的巡航进行分页，还是对已分页的巡航进行筛选，但解决方案很简单：使用一个

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>

从“@/middleware/firebase”导入firebase
导出默认值{
数据：\=>({
邮轮：[]，
搜索：“”，
页码：[“邮轮”]，
db:firebase.database（），
ref:this.db.ref（“巡航”），
查询：this.ref.on（'child_added'，this.updateCruises）
}),
计算：{
filteredCruises（）{
返回此.cruises.filter（{title}=>{
返回新的RegExp（this.search，'i'）.test（title）
})
}
},
方法：{
updateCruises（快照）{
this.cruises.push（snapshot.val（））
}
}
}
{{cruise.title}

Ok我得到

无法读取未定义的属性“concat”

这意味着

paginated（'cruise'）

返回的是

undefined

，而不是空数组。要么更改

paginated

方法以始终返回数组，要么您需要执行类似

（paginated（'cruise'）| |[]）的操作。concat

。我正在使用该插件进行分页，我相信它会返回数组。我会使用一个计算属性（只是为了清洁）。同样的逻辑思想

分页的方法做什么？我不喜欢使用
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>