자바스크립트의 .map을 사용했다.
더 좋은 방법이 있을 것 같지만...일단 그냥 모두 적었다.
store/models/main.js
// ...
/* RestAPI 호출 */
api
.get('/serverApi/main')
.then(response => {
// const carList = response && response.data && response.data.map
const carList =
response &&
response.data &&
response.data.map(({ car_img, car_name, car_fuel, car_rank, car_star, car_price }) => ({
car_img,
car_name,
car_fuel,
car_rank,
car_star,
car_price
}))
console.log('actCarList', carList)
context.commit('setCarList', carList)
})
.catch(error => {
// 에러인 경우 처리
console.error('CarList.error', error)
context.commit('setCarList', [])
})
// ...
views/main/main.vue
<template>
// ...
<div class="contents_list">
<div v-for="car in carList" :key="car.index" class="contents">
<div class="img_box">
<img :src="car.car_img" :alt="car.car_name" />
</div>
<div class="contents_box">
<dl class="c_box_01">
<dt class="rank_name" :v-model="car.car_name">{{ car.car_name }}</dt>
<dd class="fuel_name" :v-model="car.car_fuel">{{ car.car_fuel }}</dd>
<dd>유모차/카시트 신청 가능</dd>
</dl>
<div class="c_box_02">
<span class="car_rank" :v-model="car.car_rank">{{ car.car_rank }}</span>
<dd class="star" :v-model="car.car_star">★{{ car.car_star }}</dd>
</div>
<div class="price c_box_03" :v-model="car.car_price">
{{ car.car_price }}
<button @click="goRes(car)">바로 예약 하기</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script src="https://cdn.jsdelivr.net/vue/2.0.3/vue.js"></script>
<script>
export default {
data: function () {
return {
// ...
cars: [
{
car_img: '',
car_name: '',
car_fuel: '',
car_rank: '',
car_star: '',
car_price: ''
}
]
}
},
computed: {
carList() {
// 자동차 리스트 불러오기
return this.$store.getters.CarList
},
// ...
},
created() {
// this.carList() // 자동차 리스트 불러오기
this.$store.dispatch('actCarList')
},
// ...
</script>
결과
'공부 > Project' 카테고리의 다른 글
[Team 6] Edukit(공장 기기 kit) 디지털 트윈 프로젝트 (0) | 2022.03.23 |
---|---|
[Team 제주 넘는 차] 프로젝트 보고서 및 회고록 (0) | 2022.03.15 |
[Team 제주 넘는 차] 차 정렬 페이지 api 연동 시 오류 'Cannot set properties of undefined (setting 'accesstoken')' (0) | 2022.03.10 |
[Team 제주 넘는 차] 예약 페이지 유효성/공란 체크 (0) | 2022.03.04 |
[Team 제주 넘는 차] 로그아웃 (0) | 2022.03.03 |