I am facing an issue with my DynamicSelect component (child component) when utilizing it in another component (parent). The problem arises when I attempt to validate the child component, as it consistently returns a null value, resulting in failed validation.
Below is the code snippet for the DynamicSelect Component:
<template>
<a-select
:showSearch="true"
:placeholder=placeholder
:value="selectedValue"
@search="searchRegex($event)"
@change="$emit('changed-item', setChangedItem($event))"
@select="$emit('selected-item', setSelectedItem($event))"
:filterOption="filterOption"
>
<a-select-option
v-for="(item,idx) in dropdownData"
:value="idx"
:key="idx"
>{{item.text}}</a-select-option>
</a-select>
</template>
<script>
// JavaScript logic here
</script>
Here is how the parent component utilizes the DynamicSelect component:
<template>
<dynamic-select
:dataSrc="users"
placeholder="Lastname, Firstname"
@selected-item="onSelectUser($event)"
@changed-item="onSelectUser($event)"
:lookFor="['lastname','firstname']"
v-decorator="['contact', {valuePropName:'selectedValue',
rules: [{ required: true,
validator: userExists,
message: 'Error'}]}]"
>
</dynamic-select>
</template>
<script>
// More script content
.
.
.
methods: {
userExists(rule, value, callback) {
console.log('VALUE', value); //always undefined
console.log('RULES', rule);
console.log('CALLBACK', callback)
return value !== null && value !== undefined && value.length > 2;
},
onSelectUser(user) {
console.log("user: " , user); // set with the selected value
}
},
.
.
.
</script>
The expected behavior is for the child component to correctly return the selected value similar to emitting an event. I have also experimented with models but without success. Your assistance on this would be greatly appreciated. Thank you!