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>
@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: [],
},
};
},
};
has this already in a way:
const form = useForm({
trainno: ''
});
Please sign in or create an account to participate in this conversation.