vue.js radio 버튼 클릭 시 데이터 수정

Vue.js에서 라디오 버튼을 클릭할 때 데이터 값을 수정하는 방법은 다음과 같습니다:

html
<template>
  <div>
    <input type="radio" id="option1" value="option1" v-model="selectedOption">
    <label for="option1">Option 1</label>
    
    <input type="radio" id="option2" value="option2" v-model="selectedOption">
    <label for="option2">Option 2</label>

    <p>Selected Option: {{ selectedOption }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedOption: 'option1'
    }
  }
};
</script>

위의 예시에서는 두 개의 라디오 버튼과 selectedOption이라는 데이터 속성을 가진 Vue 컴포넌트를 보여줍니다.

각 라디오 버튼은 v-model 디렉티브를 사용하여 selectedOption 데이터와 양방향 바인딩됩니다. v-model 디렉티브의 value 속성은 해당 라디오 버튼이 선택되었을 때 selectedOption의 값으로 설정됩니다.

selectedOption의 초기값은 'option1'로 설정되어 있습니다.

마지막으로, <p> 요소 내에서 selectedOption의 값을 출력합니다.

라디오 버튼을 클릭하면 해당 버튼의 값이 selectedOption에 자동으로 할당됩니다. 이를 통해 데이터 값을 수정할 수 있습니다. 선택된 옵션의 값은 selectedOption에 반영되고, 이 값은 화면에 출력됩니다.

위의 예시에서는 두 개의 라디오 버튼을 제공했지만, 필요에 따라 추가적인 옵션을 추가할 수 있습니다. value 속성을 각 버튼에 다른 값을 할당하고, selectedOption의 초기값을 원하는 옵션에 맞게 설정하면 됩니다.