• 카테고리

    질문 & 답변

  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

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

21.08.03 16:00 작성 조회수 350

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를 표출하고싶은데...

어떻게 해야 할까요?ㅠㅠ

course-thumbnail

Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념

Vue.js 플러그인 소개 및 차트 플러그인 제작

강의실 바로가기

답변 2

·

답변을 작성해보세요.

1

MostOneBrush님의 프로필

MostOneBrush

2021.08.03

저도 비슷한 이슈로 고민하다가 처리를 한적이 있어서 짤막하게 글을 남깁니다.

<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>
neofront님의 프로필

neofront

질문자

2021.08.11

확인하고 답변을 너무 늦었어요.
정말 감사합니다. ㅠㅠ 
lifecycle로 해결해보려했는데, 잘못생각하고 있었던거 같아요.
알려주신 방법으로 해결했고 정말 많은 도움이 됐습니다.
진심으로 감사드립니다.

0

장기효(캡틴판교)님의 프로필

장기효(캡틴판교)

지식공유자

2021.08.07

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

이 글과 비슷한 Q&A