Vue 3表格数据渲染异常：仅地址加#后才显示

我在Vue 3项目中尝试将接口数据渲染到表格，控制台能接收到返回的数据，但表格完全无内容。只有在地址栏末尾加上#（比如http://localhost:81/realstate#），或者修改表格相关代码后，数据才会正常显示。项目已配置createWebHistory路由模式，其他页面均正常，仅该页面存在数据渲染问题。

组件Methods代码 #

async getProperty() {
  await this.$store.dispatch("axiosGet",
      {url: 'folder/api/properties'}).then(response => {
    if (response.status === 'error') return
    this.propertyList = response.data.data.data
    if (!response.data.data.data.length) {
      this.propertyList = 0
    }
    console.log(response.data.data.data)
  })
},

路由配置代码 #

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
{path: '/realstate', name: 'RealState', component: RealState},

]
const router = createRouter({history: createWebHistory(process.env.BASE_URL), routes, linkActiveClass: 'active'})

Vuex Store中的Axios Get方法 #

const baseURL = process.env.VUE_APP_REST_API
const token = localStorage.getItem('token') ? localStorage.getItem('token'): ''
state: { token}, getters: { token: state => state.token
async axiosGet({ dispatch }, {url}) {

  dispatch('checkAxiosConfig')
  let response

  await axios.get(url, {headers: {
      'Authorization': `Bearer ${token}`
     }})
      .then((res) => {response = {status: 'success', data: res}})
      .catch(error => {response = {status: 'error', data: error}})
  if (response.status === 'error') dispatch('errorHandler', response)
  return response
},

Vuex Mutations代码 #

mutations: {
toggleConfigurator(state) {
  state.showConfig = !state.showConfig
},
navbarMinimize(state) {
  const sidenav_show = document.querySelector('.g-sidenav-show')
  if (sidenav_show.classList.contains('g-sidenav-hidden')) {
    sidenav_show.classList.remove('g-sidenav-hidden')
    sidenav_show.classList.add('g-sidenav-pinned')
    state.isPinned = true
  } else {
    sidenav_show.classList.add('g-sidenav-hidden')
    sidenav_show.classList.remove('g-sidenav-pinned')
    state.isPinned = false
  }
},
sidebarType(state, payload) {
  state.sidebarType = payload
},
navbarFixed(state) {
  state.isNavFixed = state.isNavFixed === false
}

可能的原因及解决方法 #

1. 响应式破坏问题
   你把空状态的propertyList赋值为0，直接改变了数据类型（从数组变为数值），Vue无法追踪这种类型突变的响应式更新。建议改为赋值空数组：

   if (!response.data.data.data.length) {
     this.propertyList = []
   }
   

   若接口返回数据嵌套过深，可通过扩展运算符强制触发响应式更新：

   this.propertyList = [...response.data.data.data]
   

2. 组件生命周期时机问题
   确保getProperty在组件挂载完成后调用，避免路由未完全渲染时请求数据导致视图未更新。选项式API中放在mounted钩子：

   mounted() {
     this.getProperty()
   }
   

   组合式API中放在onMounted钩子：

   import { onMounted } from 'vue'
   export default {
     setup() {
       // ...
       onMounted(() => {
         getProperty()
       })
       // ...
     }
   }
   

3. Vuex Token取值问题
   你在Store中直接从localStorage取token并赋值给变量，这个值只会在Store初始化时获取一次，后续token更新不会同步。应该从state中获取token：

   async axiosGet({ dispatch, state }, {url}) {
     dispatch('checkAxiosConfig')
     let response
     await axios.get(url, {headers: {
         'Authorization': `Bearer ${state.token}`
        }})
         .then((res) => {response = {status: 'success', data: res}})
         .catch(error => {response = {status: 'error', data: error}})
     if (response.status === 'error') dispatch('errorHandler', response)
     return response
   },
   

4. 表格渲染逻辑问题
   检查表格的v-for绑定，若propertyList被赋值为0，v-for无法遍历数值类型导致无内容。确保渲染逻辑基于数组：

   <table>
     <tr v-for="item in propertyList" :key="item.id">
       <!-- 表格内容 -->
     </tr>
   </table>
   

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