Child list not being rendered

Following dependent select list is not being populating

<script setup>
import { Head, Link, useForm } from '@inertiajs/inertia-vue3';
import Checkbox from '@/Components/Checkbox.vue';
import InputError from '@/Components/InputError.vue';
import InputLabel from '@/Components/InputLabel.vue';
import PrimaryButton from '@/Components/PrimaryButton.vue';
import TextInput from '@/Components/TextInput.vue';
import {TheMask} from 'vue-the-mask';
import axios from 'axios';

defineProps({
    fdnotes: Array,
    wagons: Array,
    form:useForm
      
});

function getWagon(event){ 
let fdn = event.target.value;
    axios.get('/op1_fdnote_list/'+fdn).then((response) => {
     this.wagons=response.data;
   
      })
}
</script>

<template>

<div class="sm:px-6 lg:px-8 space-7-3.5 grid grid-cols-3 gap-4
">
  


            <div>
                <InputLabel for="fdnote_id" value="FD Note" />
                <Select
                    id="fdnote"
                    v-model="fdnote"
                    class="mt-1 block w-full"
                    required     
                    @Change="getWagon($event)" 
                    v-on:change="form.fdnote = $event.target.value">
              
            <Option selected="true" disabled="disabled">Please Select FD Note</Option>
            <Option v-for= "fdnote in fdnotes" :key="fdnote.id" :value="fdnote.id">{{fdnote.id}}</Option>
            </Select>

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


                   <div>
                
                <InputLabel for="wagon" value="Wagon No" />
                <Select
                    id="wagon"
                    v-model="wagons"
                    class="mt-1 block w-full"
                    required      
                    v-on:change="form.wagon = $event.target.value">
              
            <Option selected="true">Please Select Wagon</Option>
            <Option v-for= "wagon in wagons" :key="wagon.id" :value="wagon.id">{{wagon.tankno}}</Option>
            </Select>

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

    </div>
</template>

MohamedTammam

3 years ago

Best Answer

Level 51

I'm assuming you're getting the right data from the API.

Firstly, you shouldn't modify props. If you're loading that data from, then your Javascript would be like

defineProps({
    fdnotes: Array,
    form:useForm
});

const wagons = ref([]);

function getWagon(event){ 
let fdn = event.target.value;
    axios.get('/op1_fdnote_list/'+fdn).then((response) => {
     wagons.value =response.data;
  })
}

Please or to participate in this conversation.