tarang19
2 months ago
530
3
Vue

Props undefined on child component

Posted 2 months ago by tarang19

I wanted to send data from parent to child component but it showing UNDEFINED any one know

Parent code

<template>
<fieldset>
                        <preferences :preferences="pre"></preferences>
                        <div align="right">
                          <input type="button" name="next" class="next action-button mt-5 btn btn-primary" value="Next" />
                        </div>
                    </fieldset>
</template>

<script>

import preferences from '../Form/Preferences'
import personal from '../Form/personal.vue'
import gardian from '../Form/gardian.vue'
import acadmic from '../Form/acadmic.vue'
import fee from '../Form/fee.vue'
import declaration from '../Form/declaration.vue'
export default {
  data(){
    return{
      isActive: true,
      isShow: true,
      preferences: [],
      personal: [],
      academic: [],
      declaration: [],
      fee: [],
      gardian: [],
    }
  },
    components: {
        preferences,
        personal,
        gardian,
        acadmic,
        fee,
        declaration
    },

    mounted(){
      let self = this;
      self.check_form_status();
    },

    methods: {
      //Check_form_status Check all status And filled form 

      check_form_status(){
        let self = this;
        axios.all([
          axios('/form'), //preferences
          axios('/personal'),
          axios('/academic'),
          axios('/declaration'),
          axios('/fee'),
          axios('/gardian')
          ])
          .then(axios.spread(( form, personal, academic, declaration, fee, gardian ) => {
            self.preferences = form.data,
            self.personal = personal.data,
            self.academic = academic.data,
            self.declaration = declaration.data,
            self.fee = fee.data,
            self.gardian = gardian.data

            
          }))
      }
    },
}
</script>

my child script

<script>
export default {
    props: ['pre'],
    data(){
        return{
        preference: null,
        branchs: [],
        selectedbranch: null,
        errors:[],
        }
    },

    created(){
        console.log(this.pre)
    },

    mounted(){
        this.allbranch();
    },

    methods:{
        allbranch(){
            let self = this;
            axios.get('branch')
            .then(function (response){
                self.branchs = response.data;
            })
            .catch(function (error){
                alert(error);
            })
        },
        onSubmit(){
            // const formData = new FormData();
            // formData.append('preference', this.preference );
            // formData.append('branch', this.selectedbranch);
            // console.log(formData);
            axios.post('/form',{preference: this.preference,branch: this.selectedbranch,timeout: 120000})
            .then(response => {
                if(response.status === 200){
                    console.log('done')
                }
            }).catch((error) => {
                this.errors = error.response.data.errors;
                //alert(error.response);
            })
        }
    }

}
</script>

Please sign in or create an account to participate in this conversation.