[Vue.js] `<textarea>`에서의 양방향 데이터 바인딩

<template>
  <div>
    <!-- 예제 1: 사용자 입력에 응답하는 textarea -->
    <textarea :value="message" @input="updateMessage" placeholder="메시지를 입력하세요"></textarea>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // textarea에 바인딩할 데이터
      message: ''
    };
  },
  methods: {
    // textarea 입력에 응답하여 데이터 업데이트
    updateMessage(event) {
      this.message = event.target.value;
    }
  }
};
</script>

Vue에서 <textarea>를 사용할 때 이중 중괄호 문법({{ }})을 사용하여 데이터를 바인딩할 수 없습니다. 대신 v-model 디렉티브나 :value와 @input 이벤트를 사용하여 양방향 데이터 바인딩을 구현해야 합니다.

1. 예제 1: <textarea>에 :value를 사용하여 message 데이터를 바인딩하고, @input 이벤트를 사용하여 사용자 입력에 응답하여 데이터를 업데이트하는 방법을 보여줍니다. 사용자가 텍스트를 입력하면 updateMessage 메서드가 호출되어 데이터가 업데이트됩니다.

<textarea>에서는 이중 중괄호 문법이 작동하지 않기 때문에 v-model을 사용하는 대신 :value와 @input을 사용하여 양방향 데이터 바인딩을 구현해야 합니다. 이를 통해 사용자가 입력한 내용을 즉시 반영하고 데이터를 업데이트할 수 있습니다.