Как заставить nuxt multiselect правильно работать с данными из API Laravel? ⇐ Php

[Anonymous]

Я использую компонент USelectMenu из библиотеки Nuxt UI, и мне нужно убедиться, что отображаются все параметры, которые может выбрать пользователь. У меня это реализовано с помощью метода mapped_ Looking_for, и параметры привязаны правильно. Затем мне нужно отобразить все параметры, которые пользователь уже выбрал, что у меня тоже в некоторой степени работает.
Проблема в том, что выбор должен работать таким образом, что если опция выбрана, рядом с ней справа должна стоять галочка, указывающая, что она действительно выбрана. Однако, хотя там показано, что выбрано 5 вариантов, я не вижу галочки рядом с ними. Я также не могу взаимодействовать с ними таким образом, чтобы можно было удалить параметры. По сути, у меня это не работает; Мне пришлось бы вручную удалить их из базы данных.
Может ли кто-нибудь дать совет? Я относительно новичок в работе с API и могу неправильно передавать данные. Спасибо.
Это интерфейс.



const mapped_looking_for = ref([]);

const looking_for = ref([]);

const fetchLookingFor = async () => {
try {
const { data } = await api.get('/api/lookingFor');
mapped_looking_for.value = data.data.map(item => ({
label: item.name,
value: item.id
}));
console.log('Mapped looking_for:', mapped_looking_for.value);
} catch (error) {
console.error('Error fetching looking for options:', error);
}
};

const getLookingForPlaceholder = computed(() => {
const count = profile.value.looking_fors?.length || 0;
return count > 0 ? `${count} selected` : 'None';
});

const fetchProfile = async () => {
try {
const { data } = await api.get('/api/profiles/show');
profile.value = data.profile;
user.value = data.user;
looking_for.value = data.profile.looking_fors.map(item => item.id);
} catch (error) {
console.error('Error fetching profile:', error);
}
};

const updateProfile = async () => {
try {
const looking_for_ids = looking_for.value.map(item => item.value);

await api.put(`/api/profiles/${profile.value.id}/looking-for`, {
looking_for: looking_for_ids
});
console.log('Profile updated successfully');
} catch (error) {
console.error('Error updating profile:', error);
}
};


Вот что у меня есть на сервере.
public function updateLookingFor(Request $request): JsonResponse
{
$user = $request->user();
$profile = $user->profile;
$validated = $request->validate([
'looking_for' => 'array',
'looking_for.*' => 'exists:looking_fors,id',
]);

$profile->lookingFors()->syncWithoutDetaching($validated['looking_for']);

return response()->json(['message' => 'Looking for updated successfully']);
}

// And route
Route::put('/profiles/{id}/looking-for', [ProfileController::class, 'updateLookingFor']);



Подробнее здесь: https://stackoverflow.com/questions/790 ... aravel-api