Advertisement
Guest User

Untitled

a guest
Feb 21st, 2019
67
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.78 KB | None | 0 0
  1. chunkedAirlines: Array[6]
  2. 0: Array[2]
  3. 0: Object
  4. id: 1
  5. name: "Lorem ipsum 1"
  6. 1: Object
  7. id: 2
  8. name: "Lorem ipsum 2"
  9. ...
  10.  
  11. 1: Array[6]
  12. 0: Object
  13. id: 3
  14. name: "Lorem ipsum 3"
  15. 1: Object
  16. id: 4
  17. name: "Lorem ipsum 4"
  18. ...
  19.  
  20. <template>
  21. <div class="container-fluid">
  22. <div class="row mb-3">
  23. <div class="col-md-4">
  24. <div class="input-group mb-3">
  25. <div class="input-group-prepend">
  26. <div class="input-group-text bg-white text-muted">
  27. <i class="fas fa-search"></i>
  28. </div>
  29. </div>
  30. <input
  31. type="text"
  32. id="search-input"
  33. class="form-control border-left-0"
  34. placeholder="Find airline..."
  35. aria-label="Airline"
  36. aria-describedby="search-airline-button"
  37. v-model="search"
  38. @keyup="findAirline">
  39. </div>
  40. </div>
  41. <div class="col-md-8">
  42. <a href="#" class="btn btn-success float-right mr-4">
  43. <span class="fas fa-plus-circle mr-1"></span>
  44. New Airline
  45. </a>
  46. </div>
  47. </div>
  48. <div
  49. class="row"
  50. v-for="airlines in chunkedAirlines"
  51. :key="airlines.key">
  52. <div
  53. class="col-md-4"
  54. v-for="airline in airlines"
  55. :key="airline.id">
  56. <a
  57. :href="'/airlines/' + airline.slug"
  58. class="card airline-card shadow-sm">
  59. <div class="card-body">
  60. <img :src="airline.icon" :alt="airline.name + ' icon'" height="100" class="rounded">
  61. <p class="font-weight-bold text-capitalize mb-0 mt-3">{{ airline.name }}</p>
  62. </div>
  63. </a>
  64. </div>
  65. </div>
  66. </div>
  67. </template>
  68. <script>
  69. export default {
  70. data() {
  71. return {
  72. airlines: [],
  73. search: "",
  74. }
  75. },
  76. computed: {
  77. chunkedAirlines() {
  78. return _.chunk(this.airlines.data, 6)
  79. },
  80. findAirline() {
  81. return this.chunkedAirlines.filter(items => {
  82. return items.filter((airline) => {
  83. return airline.name.toLowerCase().includes(this.search.toLowerCase())
  84. })
  85. })
  86. }
  87. },
  88. mounted() {
  89. axios.get('/api/airlines')
  90. .then(response => {
  91. this.airlines = response.data
  92. })
  93. }
  94. }
  95. </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement