Using Vue.js, I have successfully created a form where all input fields pass their values except for the <b-form-select> element. How can I pass the value of the selected option in <b-form-select> to the parent component?
Child Component:
<label>
for="source"
class="inline-3-columns--camp-wizard"
>
<span class="title__field">Network</span>
<b-form-select
id="source"
v-model="networkAudience.source"
data-vv-as="source"
name="source"
value-field="value"
text-field="label"
:options="sources"
/>
<span
class="title__field"
data-vv-as="source"
>
{{ networkAudience.source }}
<input
v-model="networkAudience.source"
name="source"
type="hidden"
data-vv-as="source"
>
</span>
</label>
Script:
data()
{
return {
selectedclientId: null,
networkAudience: {
source: '',
name: '',
},
sources: [
{value: "Group1", label:"Group1"},
{value: "Group2", label:"Group2"}],
};
},
methods: {
async submit()
{
axios.post(projConfig.apiRoot + `/s/audiences/${this.audienceId}/network-audiences/`, this.networkAudience)
.then(response =>
{
this.networkAudiences = response.data;
console.log(response);
this.$emit('on-success');
})
.catch(error =>
{
console.error(error);
});
},
}
Parent Component:
<transition
name="fade"
@after-leave="VueEvent.$emit('close-preview-panel')"
>
<preview-panel
v-if="showAddNetwork"
:content-classes="'panel__content--camp-creation mw-1150'"
:title="'Add Network Audience'"
@close-preview="showAddNetwork = false"
>
<template #content>
<AddNetworkAudience
:audience-id="currentAudId"
@on-cancel="showAddNetwork = false"
@on-success="handleAddNetworkAudienceSuccess"
/>
</template>
</preview-panel>
</transition>
Despite trying to modify the submit method, the issue persists.
Upon form submission, the following errors occur: