hands on vue3 - 조건에 따라 option disabled 다르게 먹이기

[목표]

수정 전 소스를 갖고서 다음 조건에 맞게 select를 구현하라

 

1.유형1이 선택일 경우 유형2, 유형3 모두 disabled 상태다.

2.유형1이 중개업을 선택했을 경우 유형2가 disabled가 풀린다. 다만 유형3은 그대로 disabled 유지다.

3. 유형1이 중개업을 선택 -> 유형2을 선택 -> 유형3 disabled가 풀린다.

4. 유형1이 개인/일반은 선택했을 시 유형2만 열린다. 

 

수정 전 소스

<template>
  <div id="temp">
    <h3>선택하여 고르기</h3>
    
    <label for="section1">유형1</label>
    <select v-model="select1">
      <option value="선택">선택</option>
      <option value="중개업">중개업</option>
      <option value="개인/일반">개인/일반</option>
    </select>

    <label for="section2">유형2</label>
    <select v-model="select2">
      <option value="A">유형2의 A</option>
      <option value="B">유형2의 B</option>
      <option value="C">유형2의 C</option>
      <option value="D">유형2의 D</option>
      <option value="E">유형2의 E</option>
    </select>
    
    <label for="section3">유형3</label>
    <select v-model="select3">
      <option value="가">유형3의 가</option>
      <option value="나">유형3의 나</option>
      <option value="다">유형3의 다</option>
      <option value="라">유형3의 라</option>
      <option value="마">유형3의 마</option>
      <option value="바">유형3의 바</option>
    </select>
  </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return{
      select1: '선택',
      select2: '',
      select3: '',
    }
  }
}
</script>

<style>
#temp{
  justify-content: center;
  border-radius: 10px;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.27);
  padding: 20px;
  width: 80%;
  margin: 20px auto 20px auto;
}
select{
  margin-left:20px;
}
label{
  margin-left:20px;
}
</style>

---

수정 후 소스

<template>
  <div id="temp">
    <h3>선택하여 고르기</h3>
    
    <label for="section1">유형1</label>
    <select v-model="select1">
      <option value="선택">선택</option>
      <option value="중개업">중개업</option>
      <option value="개인/일반">개인/일반</option>
    </select>

    <label for="section2">유형2</label>
    <select v-model="select2" v-bind:disabled="select1 == '선택'">
      <option value="A">유형2의 A</option>
      <option value="B">유형2의 B</option>
      <option value="C">유형2의 C</option>
      <option value="D">유형2의 D</option>
      <option value="E">유형2의 E</option>
    </select>

    <label for="section3">유형3</label>
    <select v-model="select3" v-bind:disabled="select1=='선택' || select2 == '' || select1 =='개인/일반'">
      <option value="가">유형3의 가</option>
      <option value="나">유형3의 나</option>
      <option value="다">유형3의 다</option>
      <option value="라">유형3의 라</option>
      <option value="마">유형3의 마</option>
      <option value="바">유형3의 바</option>
    </select>
  </div>
</template>

<script>

export default {
  name: 'App',
  data(){
    return{
      select1: '선택',
      select2: '',
      select3: '',
    }
  }
}
</script>

<style>
#temp{
  justify-content: center;
  border-radius: 10px;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.27);
  padding: 20px;
  width: 80%;
  margin: 20px auto 20px auto;
}
select{
  margin-left:20px;
}
label{
  margin-left:20px;
}
</style>