Vue项目中无法访问对象属性问题求助

核心问题 #

你在App组件里犯了关键错误：接口https://jsonplaceholder.typicode.com/posts/1返回的是单个对象，但你直接把这个对象赋值给了初始为数组的tasks，导致tasks从数组变成了普通对象。而Tasks组件中的v-for="task in tasks"遍历普通对象时，会遍历对象的键名（比如userId、id、title、body），此时每个task是字符串类型，自然没有body属性，所以无法显示内容。

修复步骤 #

1. 修正App组件的数据赋值：
   将this.tasks = data改为this.tasks = [data]，把单个对象包装成数组，保证tasks始终是数组类型，这样v-for才能正确遍历出你需要的任务对象。

   修正后的App组件script部分：

   created() {
     const promise = fetch("https://jsonplaceholder.typicode.com/posts/1").then(
       (res) => res.json()
     );
     const handle = async () => {
       try {
         const data = await promise;
         this.tasks = [data]; // 改为数组包裹单个对象
         console.log(data);
       } catch (error) {
         console.error(error);
       }
     };
     handle();
   },
   

2. 优化v-for的key值：
   Tasks组件中的v-for使用task作为key不合适，因为对象作为key会被转换为字符串[object Object]，建议改用对象的唯一标识task.id：

   <div v-for="task in tasks" :key="task.id">
     <TaskComp :task="task"></TaskComp>
   </div>
   

验证 #

修改后，Tasks组件会遍历数组中的单个任务对象，将其传递给Task组件，此时task.body就能正确访问并显示接口返回的内容了。

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