단아산보

object 타입 선언은 문법이 조금 다르기에 메모해 본다 

vue3 에서는 ref 로 선언을 해야 하는 경우 아래와 같이 선언한다.

const selectedLangSrcOption = ref({
  // 자식 컴포넌트가 예상하는 프로퍼티와 값을 제공
  key: 'value',
});

초기화 해줄때 역시 key value 의 형태로 초기화를 해주어야 waring 메세지가 에러처럼 나지 않으니 참고 해야 한다. 

const selectedLangSrcOption = ref({ key : "" });

아래는 vue2 에서 object 타입의 객체를 선언 하는 예제 이다. 

셀렉트 컴포넌트에서 보통 이런 key value 의 형태를 많이 사용하기에 알아 두면 유용하게 사용 할수 있다. 

부모 컴포넌트 

<template>
  <div>
    <SelectComponent
      class="selectbox-gray"
      :options="langsTgtOpt"
      id="tgtlan"
      :selectValue="selectedLangTgtOption"
    />
    <button @click="resetSelectBox">Reset Select Box</button>
  </div>
</template>

<script>
import SelectComponent from "./SelectComponent"; // 자식 컴포넌트의 경로에 맞게 수정하세요

export default {
  data() {
    return {
      langsTgtOpt: [
        { key: "Option 1", value: "Value 1" },
        { key: "Option 2", value: "Value 2" },
        { key: "Option 3", value: "Value 3" },
      ],
      selectedLangTgtOption: {}, // 초기값은 빈 객체로 설정
    };
  },
  methods: {
    resetSelectBox() {
      this.selectedLangTgtOption = {}; // 버튼을 클릭하면 선택된 값 초기화
    },
  },
  components: {
    SelectComponent,
  },
};
</script>

자식 컴포넌트

<template>
  <select v-model="selectedValue">
    <option v-for="option in options" :key="option.key" :value="option">{{ option.value }}</option>
  </select>
</template>

<script>
export default {
  props: {
    options: {
      type: Array,
      required: true,
    },
    selectValue: {
      type: Object, // 셀렉트 박스에서 선택된 값을 객체로 받습니다.
      required: true,
    },
  },
  computed: {
    selectedValue: {
      get() {
        return this.selectValue;
      },
      set(newValue) {
        this.$emit("update:selectValue", newValue);
      },
    },
  },
};
</script>