Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- chunkedAirlines: Array[6]
- 0: Array[2]
- 0: Object
- id: 1
- name: "Lorem ipsum 1"
- 1: Object
- id: 2
- name: "Lorem ipsum 2"
- ...
- 1: Array[6]
- 0: Object
- id: 3
- name: "Lorem ipsum 3"
- 1: Object
- id: 4
- name: "Lorem ipsum 4"
- ...
- <template>
- <div class="container-fluid">
- <div class="row mb-3">
- <div class="col-md-4">
- <div class="input-group mb-3">
- <div class="input-group-prepend">
- <div class="input-group-text bg-white text-muted">
- <i class="fas fa-search"></i>
- </div>
- </div>
- <input
- type="text"
- id="search-input"
- class="form-control border-left-0"
- placeholder="Find airline..."
- aria-label="Airline"
- aria-describedby="search-airline-button"
- v-model="search"
- @keyup="findAirline">
- </div>
- </div>
- <div class="col-md-8">
- <a href="#" class="btn btn-success float-right mr-4">
- <span class="fas fa-plus-circle mr-1"></span>
- New Airline
- </a>
- </div>
- </div>
- <div
- class="row"
- v-for="airlines in chunkedAirlines"
- :key="airlines.key">
- <div
- class="col-md-4"
- v-for="airline in airlines"
- :key="airline.id">
- <a
- :href="'/airlines/' + airline.slug"
- class="card airline-card shadow-sm">
- <div class="card-body">
- <img :src="airline.icon" :alt="airline.name + ' icon'" height="100" class="rounded">
- <p class="font-weight-bold text-capitalize mb-0 mt-3">{{ airline.name }}</p>
- </div>
- </a>
- </div>
- </div>
- </div>
- </template>
- <script>
- export default {
- data() {
- return {
- airlines: [],
- search: "",
- }
- },
- computed: {
- chunkedAirlines() {
- return _.chunk(this.airlines.data, 6)
- },
- findAirline() {
- return this.chunkedAirlines.filter(items => {
- return items.filter((airline) => {
- return airline.name.toLowerCase().includes(this.search.toLowerCase())
- })
- })
- }
- },
- mounted() {
- axios.get('/api/airlines')
- .then(response => {
- this.airlines = response.data
- })
- }
- }
- </script>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement