[Vue.js] v-model으로 객체 값 바인딩하기

<template>
  <div>
    <select v-model="selected">
      <!-- 인라인 객체 리터럴 -->
      <option :value="{ number: 123 }">123</option>
    </select>
    <p>선택된 값: {{ selected }}</p>
  </div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    // 선택한 값을 저장하는 ref
    const selected = ref(null);

    return {
      selected
    };
  }
};
</script>

Vue에서는 v-model을 사용하여 문자열이 아닌 값의 바인딩도 지원합니다. 이 예제에서는 select 요소를 사용하여 객체 값을 바인딩하는 방법을 보여줍니다.

• v-model="selected": select 요소의 선택된 값을 selected 변수에 바인딩합니다.
• <option :value="{ number: 123 }">123</option>: 선택 옵션에는 객체 리터럴을 사용하여 값을 설정합니다.

사용자가 옵션을 선택하면 해당 객체가 selected 변수에 할당됩니다. 이를 통해 Vue에서는 문자열 외에도 객체 값을 편리하게 바인딩할 수 있습니다.