인프런 커뮤니티 질문&답변
작성한 질문수
vue 플러그인 data 동적으로 변동하는 질문입니다ㅠ
작성
·
464
2
안녕하세요. Vue의 길은 아직도 멀고 머네요ㅠㅠ
몇시간동안 헤메다, 강의를 다시 들었는데도 해결방안을 못찾아서 문의글 남깁니다.ㅠㅠ
현재 vue-awesome-swiper 플러그인을 사용하여
swiperOption: {
slidesPerView: 1,
spaceBetween: 16,
loop: false
},
옵션중에서 slidesPerView의 값을
api로 호출해온 List의 값에 의해 동적으로 변동시키려고 하는데 방법을 모르겠습니다.ㅠㅠ
API 호출 .then() << 여기에 then안에다가 this.swiperOption.slidesPerView = 5
으로 하면,
DOM 생성전에 Plugin을 먼저 읽어,
1의 값으로 UI가 표출되요....
저는 5의 값으로 UI를 표출하고싶은데...
어떻게 해야 할까요?ㅠㅠ
답변 2
1
저도 비슷한 이슈로 고민하다가 처리를 한적이 있어서 짤막하게 글을 남깁니다.
<swiper> 컴포넌트에 v-if로 조건 넣으시고 api 값을 받아왔을 때 해당 조건을 받아들일 수 있게 처리해보세요.
말씀하신것 처럼 dom 생성전에 plugin을 먼저 읽는다면, 해당 조건이 충족되지 않을 땐 dom을 생성하지 않게 처리하고, api 데이터를 받아올 때 dom이 생성되도록 처리해주시면 됩니다.
현재 코드가 어떻게 작성되어있으신지 몰라서 대충 약식으로 작성해봤는데 도움이 되실지 모르겠네요.
<template>
<div>
<swiper v-if="isLoading">
...중략
</swiper>
</div>
</template>
<script>
export default {
data () {
return {
isLoading: false,
swiperOption: {
slidesPerView: 1,
spaceBetween: 16,
loop: false
},
}
},
methods: {
init() {
fetch(url).then((response) => {
this.swiperOption.slidesPerView = response.data.length
this.isLoading = true
})
}
},
created () {
this.init()
}
}
</script>
0
확인하고 답변을 너무 늦었어요.
정말 감사합니다. ㅠㅠ
lifecycle로 해결해보려했는데, 잘못생각하고 있었던거 같아요.
알려주신 방법으로 해결했고 정말 많은 도움이 됐습니다.
진심으로 감사드립니다.