Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

muazzamazaz's avatar

Uncaught (in promise) TypeError: Cannot read properties of null (reading 'emitsOptions')

I am using following code to pass data from parent to child component on select list provided in parent and event fired when I change list in parent field. But getting above issue:

<script setup>
import {ref} from 'vue';

const trns = ref([]);

function getTrain(event){

trns.value="";

let id = event.target.value;

axios.get('/trns_list/'+id).then((response) => {

trns.value =response.data;

})
}
</script>


<template>
    <AppLayout title="Dashboard">
                <Select
                    id="op9"
                    v-model="op9"
                    @Change="getTrain($event)" 
                    class="mt-1 block w-full"
                    required      
                    v-on:change="form.op9 = $event.target.value">
              

            <Option selected="true" disabled="disabled" value="">Please Select Issue</Option>
            <Option v-for= "op in op9s" :key="op.id" :value="op.id">{{op.issue_date}}</Option>
            </Select>

            <InputError class="mt-2" :message="form.errors.name" />
    </AppLayout>
</template>

child:


<script setup>

import VueSelect from 'vue-next-select';
import 'vue-next-select/dist/index.min.css';

const app = createApp({})
app.component('vue-select', VueSelect)

defineProps({

        trns:Array,
});

</script>
<script>
export default {
  data() {
    return {
    tableRows: [
      {
        "id": 1,     
          trainno: '',
    
      }
    ]
    }
  }

</script>


<template >
    <table style="margin: 0 auto; width:100%">
          <thead>
          
            <tr>
          
              <th>Train#</th>

    
            </tr>
          
        </thead>
        <tbody>
            <tr v-for="(item, index) in tableRows" :key="item.id" style="width:1" >
    

              <td ><vue-select v-model="form.trainno[index]" :options="trns" searchable close-on-select label-by="trainno" class="text-left h-10 sinput" search-placeholder="Search Train No" placeholder="Train No"  track-by="trainno"></vue-select></td>
        

            </tr>
        </tbody>
    </table>
   
</template>
0 likes
2 replies
tisuchi's avatar

@muazzamazaz Make sure to include the form object in the child component's data function, and initialize trainno as an empty array.

For example:

export default {
  data() {
    return {
      form: {
        trainno: [],
      },
    };
  },
};
muazzamazaz's avatar

has this already in a way:



const form = useForm({
        trainno: ''
});

Please or to participate in this conversation.