如何在Vue文件中调用后端路由生成预算下拉选择框？

一、确保Symfony API正确返回数据 #

你的当前控制器代码直接返回findAll()的结果，需要确保Budget实体的id和name属性能被正确序列化。以下两种方式任选其一：

方式1：手动转换为数组（轻量方案） #

修改控制器代码，将实体对象手动转为包含id和name的数组：

#[Route('budgets', name: 'api.budgets', methods: ['GET'])]
public function findBudgets(BudgetRepository $budgets): JsonResponse
{
    $budgetList = array_map(function(Budget $budget) {
        return [
            'id' => $budget->getId(),
            'name' => $budget->getName()
        ];
    }, $budgets->findAll());
    
    return new JsonResponse($budgetList);
}

方式2：使用Symfony Serializer组件（规范方案） #

适合复杂实体的序列化场景，先给Budget实体添加序列化组注解：

use Symfony\Component\Serializer\Annotation\Groups;

class Budget
{
    #[Groups(['budget:read'])]
    private $id;
    
    #[Groups(['budget:read'])]
    private $name;

    // 对应的getter方法
    public function getId(): ?int
    {
        return $this->id;
    }

    public function getName(): ?string
    {
        return $this->name;
    }
}

再修改控制器代码：

use Symfony\Component\Serializer\SerializerInterface;

#[Route('budgets', name: 'api.budgets', methods: ['GET'])]
public function findBudgets(BudgetRepository $budgets, SerializerInterface $serializer): JsonResponse
{
    $budgetList = $budgets->findAll();
    $jsonData = $serializer->serialize($budgetList, 'json', ['groups' => 'budget:read']);
    
    return new JsonResponse($jsonData, 200, [], true);
}

二、Vue页面中实现下拉选择框 #

以下以Vue 3组合式API为例，提供两种请求数据的实现：

1. 使用原生Fetch API #

<template>
  <select v-model="selectedBudgetId">
    <option value="">请选择预算</option>
    <option v-for="budget in budgetList" :key="budget.id" :value="budget.id">
      {{ budget.name }}
    </option>
  </select>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const budgetList = ref([]);
const selectedBudgetId = ref('');

onMounted(async () => {
  try {
    // 替换为你的实际API地址，比如 '/api/budgets'
    const response = await fetch('/budgets');
    if (!response.ok) throw new Error('请求失败');
    budgetList.value = await response.json();
  } catch (error) {
    console.error('获取预算数据失败:', error);
  }
});
</script>

2. 使用Axios（更简洁的方案） #

如果项目已引入Axios，代码如下：

<template>
  <select v-model="selectedBudgetId">
    <option value="">请选择预算</option>
    <option v-for="budget in budgetList" :key="budget.id" :value="budget.id">
      {{ budget.name }}
    </option>
  </select>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import axios from 'axios';

const budgetList = ref([]);
const selectedBudgetId = ref('');

onMounted(async () => {
  try {
    const response = await axios.get('/budgets');
    budgetList.value = response.data;
  } catch (error) {
    console.error('获取预算数据失败:', error);
  }
});
</script>

注意事项 #

• 确认API请求地址与Symfony路由一致，若项目部署在子目录下需调整URL
• 若Vue项目与Symfony API跨域，需在Symfony中配置CORS（可使用nelmio/cors-bundle）
• 默认选项请选择预算可提升用户体验，避免默认选中第一条数据

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