vue js에서 기본 날짜를 설정하는 방법

vue js에서 기본 날짜를 설정하는 방법

날짜 선택기에서 날짜를 기본으로 설정하고 싶습니다.

코드:

<template lang="html">
  <input type="date" v-model="date">
</template>
<script lang="js">
export default {
name: 'component',
props: [],
mounted() {

},
data() {
  return {
    // date: new Date().toJSON.split('T')[0],
    date: new Date(),
  }
},
methods: {

},
computed: {

},
               }
</script>

아쉽게도 동작하지 않습니다.순간이라고 들었습니다만, 어떻게 사용할지 모르겠습니다.

v-modelon a Date 입력은 yyy-MM-dd 형식의 문자열로 동작합니다.모델에 날짜 객체가 아닌 문자열이 있으면 다음과 같이 기본 날짜 문자열을 날짜 변수에 넣으십시오.

date : new Date().toISOString().slice(0,10)

다음은 실행 예시입니다.변수 이름이 예약된 키워드에 가깝지 않도록 이름이 변경되었습니다!

vm = new Vue({
  el : '#vueRoot',
  data : { myDate : new Date().toISOString().slice(0,10) }
})

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<div  id='vueRoot'>
    <input type='date' v-model='myDate'>
    <br>
    {{myDate}}
</div>

물론 모델을 포맷하거나 비교하려면 모델에 날짜를 날짜 개체로 포함할 수 있습니다.이 경우 v-model을 피하고 바인딩의 양면을 이렇게 따로 코딩해야 합니다.

v-model바인딩

<datepicker v-model="state.date" name="uniquename"></datepicker>

이벤트를 내보내다

<datepicker 
    @selected="doSomethingInParentComponentFunction" 
    @opened="datepickerOpenedFunction"
    @closed="datepickerClosedFunction"
>
</datepicker>

언급URL : https://stackoverflow.com/questions/50720802/how-to-set-the-default-date-of-the-day-in-vue-js