Vue.js & web api 를 활용한 동적 select box 구현하기 (using cdn)
2024. 2. 7. 22:00
선택한 강아지 종류에 따라 서브 종류와 이미지를 가져오도록 되어 있습니다. 위의 예제 코드를 실행하면 각 단계에서 옵션을 선택할 수 있고, 선택에 따라 다음 단계의 옵션이 동적으로 변경됩니다.
https://dog.ceo/api/breeds 를 활용하여 3단계 동적 select 박스를 만든 예제 입니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vue.js를 이용한 동적 드롭다운</title>
<!-- Vue.js CDN 추가 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
</head>
<body>
<div id="app">
<select name="step1" v-model="selectedStep1" v-on:change="fetchStep2Options">
<option value="">단계 1 선택</option>
<option v-for="breed in breeds" :value="breed.id">{{ breed.name }}</option>
</select>
<select name="step2" v-model="selectedStep2" v-on:change="fetchStep3Options" v-show="true">
<option value="">단계 2 선택</option>
<option v-for="subBreed in subBreeds" :value="subBreed">{{ subBreed }}</option>
</select>
<select name="step3" v-model="selectedStep3" v-show="true">
<option value="">단계 3 선택</option>
<option v-for="image in images" :value="image">{{ image }}</option>
</select>
<br><br><br>
<!-- 이미지를 보여주는 부분 -->
<img v-if="selectedStep3" :src="selectedStep3" alt="선택된 이미지">
</div>
<script>
new Vue({
el: '#app',
data: {
selectedStep1: '',
selectedStep2: '',
selectedStep3: '',
breeds: [],
subBreeds: [],
images: []
},
methods: {
async fetchStep1Options() {
const response = await fetch('https://dog.ceo/api/breeds/list/all')
const data = await response.json();
this.breeds = Object.keys(data.message).map(breed => ({
id: breed,
name: breed
}));
if (this.selectedStep1) {
this.fetchStep2Options();
}
},
async fetchStep2Options() {
this.images = []; // 이미지 초기화
if (this.selectedStep1) {
const response = await fetch(`https://dog.ceo/api/breed/${this.selectedStep1}/list`)
const data = await response.json();
this.subBreeds = data.message;
if (!this.subBreeds.includes(this.selectedStep2)) {
this.selectedStep2 = '';
this.selectedStep3 = '';
} else {
this.fetchStep3Options();
}
} else {
this.selectedStep2 = '';
this.selectedStep3 = '';
}
},
async fetchStep3Options() {
this.images = [];
if (this.selectedStep2) {
const response = await fetch(`https://dog.ceo/api/breed/${this.selectedStep1}/${this.selectedStep2}/images/random/10`)
const data = await response.json();
this.images = data.message;
if (!this.images.includes(this.selectedStep3)) {
this.selectedStep3 = '';
}
} else {
this.selectedStep3 = '';
}
}
},
async mounted() {
this.selectedStep1 = 'pointer';
this.selectedStep2 = 'germanlonghair';
this.selectedStep3 = 'https://images.dog.ceo/breeds/pointer-german/n02100236_3798.jpg';
await this.fetchStep1Options();
}
});
</script>
</body>
</html>
'프로그래밍 > VueJS' 카테고리의 다른 글
| vue.js : data 초기화 과정 - created 와 mounted 그리고 event bus 활용하기 (2) | 2024.02.26 |
|---|---|
| vue.js : this.$nextTick 사용 사례 알아보기 (0) | 2024.02.21 |
| Vue JS CDN 사용법과 효과적인 사용법 (0) | 2023.11.10 |
| vuejs 의 서로 형제 관계인 컴포넌트 사이의 정보 전달 $emit 와 $on 사용 (2) | 2019.08.01 |
| Cannot find module 'webpack-cli/bin/config-yargs' 오류메시지 (0) | 2018.12.03 |