58 lines
No EOL
2 KiB
Vue
58 lines
No EOL
2 KiB
Vue
<template>
|
|
<div class="select-car sticky-lg-top py-4">
|
|
<div class="select-car-form p-3 rounded">
|
|
<div class="close_select-car d-flex justify-content-end my-3">
|
|
<button type="button" class="btn-close" aria-label="Close" v-on:click="closeSelectCar"></button>
|
|
</div>
|
|
<h3 class="d-flex justify-content-center">Select a year to get started</h3>
|
|
<h5 class="d-flex justify-content-center">What year is your vehicle?</h5>
|
|
<form :class="carView" class="list-view">
|
|
<div class="car_list car_years">
|
|
<div v-for="car in cars" :key="car.year" class="mb-3">
|
|
<input type="text" v-on:click="selectBrand(car.brands)" class="form-control" id="year" :value="car.year" readonly >
|
|
</div>
|
|
</div>
|
|
<div class="car_list car_brands">
|
|
<div v-for="brand in brands" :key="brand.brand" class="mb-3">
|
|
<input type="text" class="form-control" id="brand" :value="brand.brand" readonly >
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import axios from 'axios';
|
|
|
|
export default {
|
|
name: 'SelectCar',
|
|
data() {
|
|
return {
|
|
cars: [],
|
|
brands: [],
|
|
carView: 'show_years'
|
|
}
|
|
},
|
|
mounted() {
|
|
axios.get("https://mockey.qa.sagaws.net/service/'car_select'").then((response) => {
|
|
this.cars = response.data.cars;
|
|
console.log(this.cars);
|
|
});
|
|
},
|
|
methods: {
|
|
closeSelectCar() {
|
|
const selectCar = document.getElementById('car-select-col');
|
|
selectCar.style.transform = 'translateY(100%)';
|
|
document.body.classList.remove('no-scroll_mobile');
|
|
setTimeout(function(){
|
|
selectCar.style.opacity = '0';
|
|
}, 310);
|
|
},
|
|
selectBrand(brands) {
|
|
this.brands = brands;
|
|
this.carView = 'show_brands'
|
|
}
|
|
}
|
|
}
|
|
</script> |