3. 캘린더 적용하기

-참고문서 https://icehaunter.github.io/vue3-datepicker/

Introduction | Vue 3 Datepicker

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import VueDatePicker from 'vue3-datepicker';

const app = createApp(App);

app.component('VueDatePicker', VueDatePicker);
app.use(router);

app.mount('#app');

 

- mian.js 를 이렇게 변경했다.

 

-script setup 태그안에서 선언하길래 setup없이는 안되나 싶어서 빼봤더니 이름 호출하고는 안 썼을 때 안되는 오류가 바로 떴다. 아무래도 setup을 적냐 안적냐의 차이에 따라 달라지는 듯 하다. setup 부분이 있을 경우 export default 사용이 불가능했다.

template 태그 안에 html에서 변수 지정해서 사용을 하고 싶다면 script setup 을 선언하고 거기에 변수들을 넣어야 하는 듯 했다.

 

<div>
    <span>기한<a class="red">*</a></span>
    <br/>
    <VueDatePicker :modelValue="picked" @update:modelValue="newDate => picked = newDate"/>
</div>

//...

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

var picked =  ref(new Date()); //이걸 써야 데이터 값이 반응되며 날짜가 변경됨
</script>

 

-캘린더 적용은 했는데 날짜를 눌러도 변경되지 않아서 왜 안되지 하고 열심히 자료를 뒤지다가 모르겠어서 결국 챗 GPT로 물어봤다. 결론은 저 ref를 써야지 반응형으로 작동이 되는데 내가 vue는 이미 적용되어 있는데 궂이~? 하면서 뺐던게 문제가 됐던 거였다.