Vue3中TypeScript对象数组赋值与循环渲染异常问题

核心问题分析 #

• props只读限制：Vue3中通过defineProps定义的属性是只读常量，无法直接赋值，这就是你遇到“Attempt to assign to const or readonly variable”错误的根本原因，和Vue2中不能直接修改props的规则一致，只是Vue3在TypeScript环境下会直接抛出语法级错误。
• 渲染无内容的原因：你错误地尝试修改props而非将接口数据绑定到可响应的本地变量，导致页面无法追踪数据变化，自然无法渲染出内容。

修正步骤 #

1. 声明本地响应式变量 #

用ref定义一个本地响应式变量来存储接口返回的数据，替代直接操作props：

import { ref } from 'vue';
import type { TestResponse } from './your-type-file-path';

// 初始化空数组存储数据
const localTestData = ref<TestResponse[]>([]);

2. 调整submit方法逻辑 #

请求接口后，将数据赋值给本地响应式变量，而非props：

const submit = async () => {
  try {
    const response = await yourApiCallFunction(); // 替换为你的实际接口请求方法
    localTestData.value = response.data; // 赋值给本地变量
    console.log(response.data); // 此处可正常打印数据
  } catch (err) {
    console.error('请求失败:', err);
  }
};

3. 页面循环渲染本地变量 #

将v-for的数据源改为本地响应式变量：

<template>
  <div v-for="item in localTestData" :key="item.id">
    <!-- 渲染item的具体内容，比如 {{ item.name }} -->
  </div>
</template>

可选：同步父组件传递的初始props数据 #

如果props用于接收父组件的初始数据，可在组件初始化时将props值同步到本地变量：

const props = defineProps<{
  test: TestResponse[];
}>();

// 组件初始化时同步初始数据，用扩展运算符避免引用关联
localTestData.value = [...props.test];

修改完成后，既可以规避修改props的错误，数据变化也能被Vue正常追踪，页面就能正常渲染循环内容了。

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