vue 플러그인 data 동적으로 변동하는 질문입니다ㅠ

Question

안녕하세요. 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를 표출하고싶은데... 어떻게 해야 할까요?ㅠㅠ

MostOneBrush · Answer

저도 비슷한 이슈로 고민하다가 처리를 한적이 있어서 짤막하게 글을 남깁니다. 컴포넌트에 v-if로 조건 넣으시고 api 값을 받아왔을 때 해당 조건을 받아들일 수 있게 처리해보세요. 말씀하신것 처럼 dom 생성전에 plugin을 먼저 읽는다면, 해당 조건이 충족되지 않을 땐 dom을 생성하지 않게 처리하고, api 데이터를 받아올 때 dom이 생성되도록 처리해주시면 됩니다. 현재 코드가 어떻게 작성되어있으신지 몰라서 대충 약식으로 작성해봤는데 도움이 되실지 모르겠네요. < template > < div > < swiper v-if = "isLoading" > ...중략 < 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 () } }

captain · Answer

@MostOneBrush 대신 자세하게 답변해 주셔서 감사합니다 :) @neofront님 위 답변 참고하시면 좋을 것 같아요 :)