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

[Anonymous]

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

Код: Выделить всё

Your profile


















































Save









import { ref, onMounted } from 'vue'

const { api } = useAxios();
const profile = ref({});

const user = ref({});

const mapped_looking_for = ref([]);
const selected_looking_for = ref([]);
const genders = ['male', 'female']

const height_option = ref([{ label: 'Do not show', value: 'Do not show' }]);

const weight_option = ref([{ label: 'Do not show', value: 'Do not show' }]);

const relationship_status = ["Do not show", "Commited", "Dating", "Engaged", "Exclusive", "Married", "Open Relationship", "Partnered", "Single"]

const body_types = ["Do not show", "Toned", "Average", "Large", "Muscular", "Slim", "Stocky"]

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 fetchProfile = async () => {
try {
const { data } = await api.get('/api/profiles/show');
profile.value = data.profile;
user.value = data.user;
selected_looking_for.value = data.looking_fors.map(item => item.id);
} catch (error) {
console.error('Error fetching profile:', error);
}
};

// Updating profile
const updateProfile = async () => {
try {
const looking_for_id = selected_looking_for.value.map(item => item.value);

await api.put(`/api/profiles/${profile.value.id}`, {
bio: profile.value.bio,
gender: profile.value.gender,
show_age: profile.value.show_age,
height: profile.value.height,
weight: profile.value.weight,
body_type: profile.value.body_type,
relationship_status: profile.value.relationship_status
});

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

const getAvatarUrl = (avatarPath) => {
const baseUrl = 'http://localhost:8080';
return `${baseUrl}/storage/${avatarPath}`;
};

watch(() => profile.value.show_age, async (new_value) => {
try {
await api.put(`/api/profiles/${profile.value.id}`, {
show_age: new_value
});
console.log('Show age updated successfully');
} catch (error) {
console.error('Error updating profile:', error);
}
});

// height select

for (let i = 120; i profile;

return response()->json([
'user' => [
'name' => $user->name,
'email' => $user->email,
],
'profile' => $profile,
'looking_fors' => $profile->lookingFors
]);
}

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()->sync($validated['looking_for']);

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

// И маршрут

Код: Выделить всё

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

Дополнительная информация:
Это полезная нагрузка для первоначального запроса, когда у пользователя ничего не сохранено в поле Looking_for сводной таблицы Profiles_ Looking_fors:

Код: Выделить всё

{looking_for: [1, 2, 3]}

Он сохраняет идентификатор соответствующего поискового_фора, что правильно.
Однако, когда я снова выбираю те же значения (что, по сути, означает, что я хочу чтобы отменить их выбор или удалить из базы данных, чтобы она работала в обоих направлениях), возникает ошибка:

Код: Выделить всё

"errors": {
"looking_for.0": [
"The selected looking_for.0 is invalid."
],
"looking_for.1": [
"The selected looking_for.1 is invalid."
],
"looking_for.2": [
"The selected looking_for.2 is invalid."
]
}

Это полезная нагрузка: после ошибок

Код: Выделить всё

{looking_for: [null, null, null, 1, 2, 3]}

Он отправляет нулевые значения вместе с 1, 2, 3.

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