Vue.js와 Timepicker을 같이 사용했더니 발생한 일

Vue.js를 사용하면서 jQuery Ui인 Timepicker을 사용했어야 했는데

같이 사용해보니 발생했던 이슈가 있어 정리하고자 한다 🤔

input태그를 클릭시 timepicker가 나타날텐데 input태그에 값이

들어가있는것 처럼 보이지만 실제로 v-model의 변수값이 변경되고 있지 않았다.

코드를 보면서 자세히 설명해보겠다 :)

 

---

 

📋 기존코드

vue를 사용한다면 기본적으로 아래와같이 적어줄 것이다.

<input type="text" v-model="time" class="timepicker"/>
<script>
	$('.timepicker').timepicker();
</script>

여기서 문제가 timepicker가 선택됐을때 time이라는 변수의 값이

변경되지 않는다는거다.

vue객체안에서 timepicker을 설정해주고 onSelect 함수를 추가해줘도 똑같은...

그래서 열심히 구글링하다가 vue의 component를 사용해보기로 했다.

 

---

 

📋 수정코드

Vue.component('timepicker', {
    props: ['value', 'varName'],
    template: '<input type="text" placeholder="00:00" v-model="value"/>',
    mounted: function() {
        var self = this;
        $(this.$el).timepicker({
            onClose: function(d){
                var name = self.varName;
                self.$emit('update-time', name, d);
            }
        });
    },
});


var wrap = new Vue({
    el: '#Wrap',
    data: {
        time: "",
    },
    methods: {
        updateTime(variable, d){
            this[variable] = d;
        },
    }
});

시간을 표시해주는 input이 

새로운 데이터를 받아서 새로 INSERT시켜주는 것과 UPDATE로 수정하는 기능이있어서

기존 저장된 데이터를 받아서 표시해주기 위해

props의 value로 값을 받아 v-model로 지정해주었다.

보면 아시겠지만 varName은 new Vue의 객체의 데이터에 있는 변수 명이다.

 

추가적으로 참고한 글에는 onClose함수가 아닌 onSelect함수를 사용해놨었는데

아래 사진에서 Hour과 Minute가 클릭될 때가 아닌

최초 한번 클릭시에만 이벤트가 발생해서

선택이 끝났을때 값을 set해주기위해 onClose함수로 바꾸었다.

 

<timepicker v-model="time" var-name="time" @update-time="updateTime"></timepicker> 

이런식으로 component선언을 해주면 끝 XD