Trying to do dayjs with vue3 It worked fine when I wasn't using dayjs. When I enter that code I get an error stating that 'date_posted' cannot be accessed and is not displayed on the screen. Is there a vue3 setting I'm missing? Is there any special setting for dayjs? The dayjs usage searched only vue2 and could not find vue3.

<template>
  <div >
    <Sidebar />
    <div >
      <div >
        <h3 >
          Notice write
        </h3>
        <form
          
          @submit.prevent="formCreate()">
          <div >
            <h3 >
              title
            </h3>
            <textarea
              v-model="form.title"
              maxlength="100"></textarea>
          </div>
          <div >
            <h3 >
              company
            </h3>
            <textarea
              v-model="form.company"
              maxlength="100"></textarea>
          </div>
          <div >
            <h3 >
              company url
            </h3>
            <textarea
              v-model="form.company_url"
              maxlength="100"></textarea>
          </div>
          <div >
            <h3 >
              location
            </h3>
            <textarea
              v-model="form.location"
              maxlength="100"></textarea>
          </div>
          <div >
            <h3 >
              days
            </h3>
             //This Problem code
            <p>{{ form.date_posted }}</p>
          </div>
          <div >
            <h3 >
              content
            </h3>
            <textarea v-model="form.description"></textarea>
          </div>
          <div >
            <button
              type="reset"
              >
              cancle
            </button>
            <button
              >
              Add write
            </button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>
<script setup>
import Sidebar from '~/components/Sidebar.vue'
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import dayjs from 'dayjs'
import axios from 'axios'

const router = useRouter()

const form = ref({
  title: null, 
  company: null, 
  company_url: null, 
  location: null, 
  description: null,
  date_posted: Date.now()
})
//This Problem code
const date_posted = dayjs(date_posted).format('YYYY-MM-DD-HH-mm-ss초')
const formCreate = async (id) => {
    let token = sessionStorage.getItem('access_token')
    const data = {
        title: form.value.title,
        company: form.value.company,
        company_url: form.value.company_url,
        location: form.value.location,
        description: form.value.description,
        date_posted: form.value.date_posted,
      }
    console.log(form)
  try {
    await axios.post('http://127.0.0.1:8000/jobs/create-job/', data, {
      headers: {
        'Content-Type': 'application/json' ,
         'Authorization' : token
        }, 
      withCredentials:true,
      params:{
        id
      }
    })
    .then((res)=>{
    console.log(res.data)
    })
  } catch (error) {
    console.log(error)
  }
}
 </script>

CodePudding user response：

It's not related to day.js, That's the error happens because you use the date_posted const before initialization.

const date_posted = dayjs(date_posted).format('YYYY-MM-DD-HH-mm-ss초')

But you need to get it from the form ref, So it should look like this.

const date_posted = dayjs(form.value.date_posted).format('YYYY-MM-DD-HH-mm-ss초')