Pass selected option <b-form-select> to axis post from child to parent

Question

I created a form using Vue.js. All my input fields are getting passed but I can't get the value in the <b-form-select> to pass. How do I pass the value of the selected option in <b-form-select> to parent?

child:

<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>

Here is my 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:

<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>

I've tried changing my submit method but it isn't working.

I get the following errors after submitting the form:

error in network

enter in console

Answer 1

I am not sure what issue you are facing but I created a snippet and it is working fine as per the expectation. Can you please have a look in the below code snippet and let me know what issue you are facing.

new Vue({
  el: '#app',
  data: {
    networkAudience: {
      source: '',
      name: '',               
    },
    sources: [     
      {
        value: "Group1", label:"Group1"
      }, {
        value: "Group2", label:"Group2"
      }
    ]
  },
  methods: {
    submitForm() {
        console.log(this.networkAudience);
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/bootstrap-vue.js"></script>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/bootstrap-vue.css"/>
<div id="app">
  <b-form-select v-model="networkAudience.source"
                 :options="sources"
                 value-field="value"
                 text-field="label"
                 ></b-form-select>
  <div>Selected Option: <strong>{{ networkAudience.source }}</strong></div>
  <button type="submit" @click="submitForm()">Submit</button>
</div>