Vue3中使用Dayjs报错：date_posted无法访问的问题求助

问题原因 #

你遇到的date_posted无法访问错误是因为变量未定义就提前引用，以及格式化后的日期未正确关联到表单对象：

• 代码中const date_posted = dayjs(date_posted).format(...)这一行，date_posted在赋值右侧还未声明就被使用，直接触发ReferenceError；
• 模板绑定的是form.date_posted，但单独声明的date_posted变量和表单对象里的字段毫无关联，导致页面无法显示格式化后的日期。

另外，Dayjs在Vue3中不需要特殊配置，和Vue2的使用逻辑一致，核心是正确处理变量引用与数据绑定。

修复方案 #

根据你的需求，有两种常见修复方式：

方式1：初始化时直接格式化表单的date_posted字段 #

如果后端需要接收格式化后的日期字符串，直接在初始化form时用Dayjs生成格式化值：

<template>
  <div class="container">
    <Sidebar />
    <div class="notice_write">
      <div class="wright_wrap">
        <h3 class="box_title">Notice write</h3>
        <form class="form_box" @submit.prevent="formCreate()">
          <!-- 其他表单项省略 -->
          <div class="in_title">
            <h3 class="sub_title">days</h3>
            <p>{{ form.date_posted }}</p>
          </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,
  // 直接用Dayjs生成格式化后的日期
  date_posted: dayjs().format('YYYY-MM-DD-HH-mm-ss초')
})

// 移除原来错误的date_posted变量声明

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,
  }
  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>

方式2：保留时间戳，用计算属性显示格式化后的日期 #

如果后端需要接收时间戳（原Date.now()的值），但页面要显示格式化后的日期，使用Vue的计算属性：

<template>
  <div class="container">
    <Sidebar />
    <div class="notice_write">
      <div class="wright_wrap">
        <h3 class="box_title">Notice write</h3>
        <form class="form_box" @submit.prevent="formCreate()">
          <!-- 其他表单项省略 -->
          <div class="in_title">
            <h3 class="sub_title">days</h3>
            <!-- 显示计算属性格式化后的值 -->
            <p>{{ formattedDatePosted }}</p>
          </div>
          <!-- 其他表单项省略 -->
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
import Sidebar from '~/components/Sidebar.vue'
import { ref, computed } 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()
})

// 用计算属性格式化日期
const formattedDatePosted = computed(() => {
  return dayjs(form.value.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,
  }
  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>

关键注意点 #

• 避免在变量声明前引用它，JavaScript中变量声明会提升，但赋值不会，提前引用会导致undefined或ReferenceError；
• 表单字段和独立变量要区分开，模板绑定的是响应式对象form里的属性，确保格式化后的值正确关联到该属性，或通过计算属性做中转；
• Dayjs在Vue3中无需额外配置，只要正确导入并调用API即可，和Vue2的使用差异仅在于组合式API的写法（script setup）。

内容的提问来源于stack exchange，提问作者bxeom