Vue3+Pinia+API Platform编辑页面输入框无法预填充求助

问题说明 #

基于Vue3 + Pinia Store + API Platform搭建的学生CRUD应用，已完成列表展示、添加、删除功能。点击编辑按钮可携带ID跳转到编辑页，能成功获取对应学生数据并打印，但存在两个问题：

1. 编辑页的表单输入框无法预填充获取到的学生数据
2. 不知道如何将单条学生数据正确赋值给Pinia Store中的students数组

现有代码片段 #

EditPage 组件代码 #

<template>
    <div class="container mt-5">
        <h1>Edit Student (id: {{ currentId }})</h1>
        <div class="row">
            <div class="col">
                <form id="form" @submit.prevent="studentStore.alertMe(id)">  
                    <div class="mb-3">
                        <label class="form-label">Name</label>
                        <input v-model="newStudent.name" type="text" class="form-control" placeholder="" aria-describedby="helpId">
                        <small id="helpId" class="text-muted">Name </small>
                    </div>
                    <div class="mb-3">
                        <label for="" class="form-label">Course</label>
                        <input v-model="newStudent.course" type="text" class="form-control" placeholder="" aria-describedby="helpId">
                        <small id="helpId" class="text-muted">Name Course</small>
                    </div>
                    
                    <div class="row g-3">
                        <div class="col">
                            <label>e-Mail</label>
                            <input v-model="newStudent.email" type="text" class="form-control" placeholder="" aria-label="First name">
                            <small id="helpId" class="text-muted">e-Mail</small>
                        </div>
                        <div class="col">
                            <label>Phone</label>
                            <input v-model="newStudent.phone" type="text" class="form-control" placeholder="" aria-label="Last name">
                            <small id="helpId" class="text-muted">Phonenumber</small>
                        </div>
                    </div>
                    <div class="mb-3 mt-4">
                        <button type="submit" class="btn btn-success">Save</button>
                    </div>
                </form>
            </div>
            <div class="col">
                <p>Status</p>
                <div id="responseContainer"></div>
            </div>
        </div>
    </div>
</template>

Pinia Store 片段 #

export const useStudentStore = defineStore('studentStore', {
  state: () => ({
    students: [],
    loading: false,
    name: 'Vue3 (script setup) / Pinia Store / Bootstrap 5.3 / CRUD / Fetch',
    apiurl: "http://xx.x.x.xx/symfony/api_projekt04/public/index.php/api/students",
  }),

获取全量数据函数（正常工作） #

// FETCH Method: GET all Students
async getStudents() {
  const res = await fetch(this.apiurl)      
  const data = await res.json()             

  console.log(data["hydra:member"]);        

  this.students = data["hydra:member"]      
},

获取单条数据函数（赋值有问题） #

// FETCH Method: GET one Student
async getStudentData(id) {
  const res = await fetch(this.apiurl + '/' + id)   
  const data = await res.json()                    

  console.log(res);      
  console.log(data);      

  this.students = data["hydra:member"]       
},

解决方案 #

1. 表单预填充问题解决 #

编辑页的newStudent变量未被赋值为获取到的学生数据，需在组件脚本中补充逻辑：

<script setup>
import { useStudentStore } from '@/stores/studentStore'
import { useRoute } from 'vue-router'
import { ref, onMounted } from 'vue'

const studentStore = useStudentStore()
const route = useRoute()
// 从路由参数获取当前编辑的学生ID
const currentId = route.params.id
// 初始化表单绑定的变量
const newStudent = ref({
  name: '',
  course: '',
  email: '',
  phone: ''
})

onMounted(async () => {
  // 调用Pinia方法获取单条学生数据
  const studentData = await studentStore.getStudentData(currentId)
  // 将数据赋值给newStudent，实现表单预填充
  newStudent.value = { ...studentData }
})

// 替换原有的submit事件处理，改为调用更新方法
const handleSubmit = async () => {
  await studentStore.updateStudent(currentId, newStudent.value)
  // 提交成功后可跳回列表页
  // router.push('/students')
}
</script>

同时修改模板中的表单提交事件：

<form id="form" @submit.prevent="handleSubmit">

2. Pinia Store 中students数组赋值问题解决 #

API返回的单条学生数据是单个对象，而非带hydra:member的数组结构，需修改getStudentData方法：

场景1：更新列表中对应ID的学生数据（保持列表与编辑数据同步）

async getStudentData(id) {
  const res = await fetch(`${this.apiurl}/${id}`)
  const data = await res.json()
  
  console.log(data);
  
  // 找到数组中对应ID的元素并替换
  const targetIndex = this.students.findIndex(student => student.id === id)
  if (targetIndex !== -1) {
    this.students[targetIndex] = data
  }
  // 返回数据给编辑页使用
  return data
}

场景2：仅将单条数据存入students数组（不推荐，不符合CRUD逻辑）

async getStudentData(id) {
  const res = await fetch(`${this.apiurl}/${id}`)
  const data = await res.json()
  
  console.log(data);
  
  // 将单条数据包装为数组赋值
  this.students = [data]
  // 返回数据给编辑页使用
  return data
}

补充：新增学生更新方法 #

在Pinia Store中添加更新学生的API调用方法：

async updateStudent(id, studentData) {
  const res = await fetch(`${this.apiurl}/${id}`, {
    method: 'PUT', // 若API支持PATCH也可使用
    headers: {
      'Content-Type': 'application/ld+json'
    },
    body: JSON.stringify(studentData)
  })
  const updatedData = await res.json()
  
  // 更新store中的数据
  const targetIndex = this.students.findIndex(student => student.id === id)
  if (targetIndex !== -1) {
    this.students[targetIndex] = updatedData
  }
  
  return updatedData
}

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