I've encountered an issue with sending the value of a select input to my database while working with Vue, Quasar, and TypeScript.
Within a modal, I have name and age inputs along with a select that chooses a category. However, when attempting to send this select value to the database, an object is sent containing both the label and value of the select. The database requires only a numeric value for it to be accepted.
const baseFieldStates = {
name: '',
age: '',
category: null,
};
//@ts-ignore
const fieldStates: Ref<UserFormData> = ref({
...baseFieldStates,
...props.userData
});
Below is the function I am using to save user data in the database.
const userAction = props.userData ? editUser : createUser
const saveUser = () => {
userAction(fieldStates.value)
.then(() => {
onDialogOK(fieldStates.value);
})
.catch(() => {
onDialogCancel();
})
};
This is how the select input is defined:
<q-select
outlined
class="q-mb-lg"
:options="rolesOptions"
option-value="value"
option-label="label"
:label="$t('Users.form.role')"
v-model="fieldStates.category"
/>
An example of how the select input is currently being sent to the database is shown below.
{label: 'Example', value: 1}