vue-tailwind
vue-tailwind copied to clipboard
Rich Select's required prop not working properly
I used
<form method="post" @submit.prevent="submit">
..
<t-input-group
label="Nationality"
class="w-1/6"
>
<t-rich-select
:fetch-options="fetchOptions"
v-model="shareHolder.nationality"
:minimum-input-length="3"
clearable
:required="true"
:name="`shareHolders[${index}][nationality]`"
placeholder="Select a nationality..."
text-attribute="name"
value-attribute="id"
>
<template
slot="label"
slot-scope="{ className, option, query }"
>
<div class="flex">
<div class="flex flex-col ml-2 text-gray-800">
<strong>{{ option.raw.name }}</strong>
<span class="text-sm leading-tight text-gray-700">{{ option.raw.country }}</span>
</div>
</div>
</template>
</t-rich-select>
</t-input-group>
..
</form>
@KimangKhenng can yo share the fetch options method?
Thanks for your reply,
This is my fetch-options function.
fetchOptions (q) {
return fetch(`${this.$config.baseURL + apiHead}miscellaneous/nationalities/search?name=${q}`)
.then((response) => response.json())
.then((data) => ({ results: data.items }))
}
@KimangKhenng cannot find any issue with the method so maybe the result from your API request is not being properly formated, what do you see if you console.log(data.items)
for example?
Hi @alfonsobries ,
Once again, thanks for your attention! this is the console output when I search with keyword : cam
[
{
"id": "14e4783b-0ba3-44f1-adfa-6ddf09c2212b",
"name": "Camarinense",
"country": "Camarines Sur",
"createdDate": "2021-07-12T16:02:24.244Z",
"updatedDate": "2021-07-12T16:02:24.244Z"
},
{
"id": "da3d5512-b948-48ed-aa3e-a5b6022a009a",
"name": "Cambodian",
"country": "Cambodia",
"createdDate": "2021-07-12T16:02:24.244Z",
"updatedDate": "2021-07-12T16:02:24.244Z"
},
{
"id": "6164cc49-b551-4ebf-8af8-d0633f7f5dfc",
"name": "Cameroonian",
"country": "Cameroon",
"createdDate": "2021-07-12T16:02:24.244Z",
"updatedDate": "2021-07-12T16:02:24.244Z"
},
{
"id": "c138225c-35a1-4946-b19e-a836f1c949c4",
"name": "Camiguin",
"country": "Camiguin",
"createdDate": "2021-07-12T16:02:24.244Z",
"updatedDate": "2021-07-12T16:02:24.244Z"
},
{
"id": "bf3351bf-c0eb-44f7-b104-8d77622c0e90",
"name": "Campanian",
"country": "Campania",
"createdDate": "2021-07-12T16:02:24.244Z",
"updatedDate": "2021-07-12T16:02:24.244Z"
},
{
"id": "3caf75db-dc27-4f4f-adcc-211216ff4227",
"name": "Campechan",
"country": "Campeche",
"createdDate": "2021-07-12T16:02:24.244Z",
"updatedDate": "2021-07-12T16:02:24.244Z"
},
{
"id": "07f8758e-045d-47d0-b6ab-b341de3cf131",
"name": "Campechano",
"country": "Campeche",
"createdDate": "2021-07-12T16:02:24.244Z",
"updatedDate": "2021-07-12T16:02:24.244Z"
},
{
"id": "71828606-c6bb-4f92-8fef-2cbeeb118cc7",
"name": "Campineiro",
"country": "Campinas",
"createdDate": "2021-07-12T16:02:24.244Z",
"updatedDate": "2021-07-12T16:02:24.244Z"
},
{
"id": "1e0d5e2e-26c7-49de-a8df-6e7d990493f9",
"name": "Maccam",
"country": "Sunderland",
"createdDate": "2021-07-12T16:02:24.244Z",
"updatedDate": "2021-07-12T16:02:24.244Z"
},
{
"id": "303a86c4-b4d7-4c42-8b05-664c044df3ad",
"name": "North Camarinean",
"country": "Camarines Norte",
"createdDate": "2021-07-12T16:02:24.244Z",
"updatedDate": "2021-07-12T16:02:24.244Z"
},
{
"id": "21906c18-ab06-4825-947e-dd6b809af79a",
"name": "South Camarinean",
"country": "Camarines Sur",
"createdDate": "2021-07-12T16:02:24.244Z",
"updatedDate": "2021-07-12T16:02:24.244Z"
}
]
It doesn't work with a regular rich select either (options supplied from an array for example). Even though the required prop is set, you can just submit anyway without any problems. So I believe the required prop doesn't do anything just in general.
I've also noticed this. Seems "required" was forgotten in the renderer.
https://github.com/alfonsobries/vue-tailwind/blob/7abbabc859ce33e13306959bc492607e9d01f721/src/renderers/TRichSelectRenderer.ts#L149.