[#646][3.0] Select 컴포넌트 change 이벤트가 안되는 현상 수정 (#858)

Co-authored-by: byeongwan <byeongwan@ex-em.com>

docs/views/select/api/select.md

@@ -57,7 +57,7 @@
 
  | 이름 | 파라미터 | 설명 |
  | ---- | ------- | ---- |
- | change | newValue, event | <셀렉트> 내 v-model 변화 이벤트 감지 |
+ | change | newValue | <셀렉트> 내 v-model 변화 이벤트 감지 |
 
 >### 참고
  - 

docs/views/select/example/Default.vue

@@ -16,7 +16,7 @@
       first selectbox value : {{ selectVal1 }}
     </div>
     <div class="description">
-      change val : {{ selectEventVal.val }} / change e : {{ selectEventVal.e }}
+      change val : {{ selectEventVal.val }}
     </div>
   </div>
   <div class="case">
@@ -142,9 +142,8 @@ export default {
         value: `value${count}`,
       });
     };
-    const changeSelect1 = (val, e) => {
+    const changeSelect1 = (val) => {
       selectEventVal.val = val;
-      selectEventVal.e = e;
     };
 
     const selectVal3 = ref('value1');

docs/views/select/example/Multiple.vue

@@ -6,10 +6,14 @@
       :items="items1"
       placeholder="Please select values."
       multiple
+      @change="changeEvent"
     />
     <div class="description">
       first selectbox value : {{ selectVal1 }}
     </div>
+    <div class="description">
+      change val : {{ changeVal }}
+    </div>
   </div>
   <div class="case">
     <p class="case-title">Multiple Clearable Select</p>
@@ -104,10 +108,16 @@ export default {
         value: 'value7',
       },
     ]);
+    const changeVal = ref();
+    const changeEvent = (val) => {
+      changeVal.value = val;
+    };
 
     return {
       selectVal1,
       items1,
+      changeVal,
+      changeEvent,
     };
   },
 };

src/components/select/Select.vue

@@ -28,7 +28,6 @@
         readonly
         :placeholder="computedPlaceholder"
         :disabled="disabled"
-        @change="changeMv"
         @click="clickSelectInput"
       />
     </template>
@@ -240,7 +239,7 @@ export default {
       changeDropboxPosition,
       clickItem,
       selectedItemClass,
-    } = useDropdown({ mv });
+    } = useDropdown({ mv, changeMv });
 
     return {
       mv,

src/components/select/uses.js

@@ -68,27 +68,27 @@ export const useModel = () => {
     }
   };
 
+  /**
+   * 해당 컴포넌트의 v-model값이 변경(change)되는 이벤트
+   */
+  const changeMv = async () => {
+    await nextTick();
+    emit('change', mv.value);
+  };
+
   /**
    * multiple 모드인 경우 선택된 value를 mv에서 삭제하는 로직
    * @param val - tagWrapper에서 [x]클릭된 목록의 value
    */
-  const removeMv = (val) => {
+  const removeMv = async (val) => {
     if (!props.disabled) {
       const idx = mv.value.indexOf(val);
       mv.value.splice(idx, 1);
       mv.value = [...mv.value];
+      await changeMv();
     }
   };
 
-  /**
-   * 해당 컴포넌트의 v-model값이 변경(change)되는 이벤트
-   * @param e
-   */
-  const changeMv = async (e) => {
-    await nextTick();
-    emit('change', mv.value, e);
-  };
-
   return {
     mv,
     selectedModel,
@@ -102,7 +102,7 @@ export const useModel = () => {
 
 export const useDropdown = (param) => {
   const { props } = getCurrentInstance();
-  const { mv } = param;
+  const { mv, changeMv } = param;
 
   const isDropbox = ref(false);
   const filterTextRef = ref(props.filterText);
@@ -218,6 +218,7 @@ export const useDropdown = (param) => {
     }
     mv.value = val;
     isDropbox.value = false;
+    changeMv();
   };
   const multipleClickItem = (val) => {
     if (props.filterable) {
@@ -229,6 +230,7 @@ export const useDropdown = (param) => {
       const idx = mv.value.indexOf(val);
       mv.value.splice(idx, 1);
     }
+    changeMv();
   };
   const clickItem = !props.multiple ? singleClickItem : multipleClickItem;