ref 데이터의 연동 2

 

ref 데이터의 연동

 

• v-model 디렉티브를 사용하여 이 라디오 버튼 그룹과 JavaScript 변수 selectedOption을 양방향 데이터 바인딩한다. 즉, 사용자가 라디오 버튼 중 하나를 선택하면 selectedOption의 값이 해당 버튼의 value 값으로 업데이트된다.
• v-if 디렉티브를 사용하여 selectedOption이 비어 있지 않은 경우에만 해당 선택된 옵션을 표시한다.

• <script setup> 블록은 Vue.js 3의 Composition API를 사용하여 데이터와 로직을 정의하는 곳입니다.
• import { ref } from 'vue'; : Vue 3의 ref 함수를 가져와 사용한다. ref 함수를 사용하면 반응성 있는 데이터를 생성할 수 있다.
• const selectedOption = ref(null); : selectedOption 변수를 정의하고 ref 함수를 사용하여 반응성 있는 데이터를 생성한다. 초기값은 null로 설정된다.

 

// HTML
<template>
	<div>
    <input type="radio" v-model="selectedOption" value="test1"> test1
    <input type="radio" v-model="selectedOption" value="test2"> test2
    <input type="radio" v-model="selectedOption" value="test3"> test3
  </div>

  <div>
    <p>Selected Option: 
      <span v-if="selectedOption">{{ selectedOption }}</span>
    </p>
  </div>
  
</template>

// Javascript
<script setup>
  import { ref } from 'vue';
  const selectedOption = ref(null);
</script>

---