CODEWITHSUNDEEP
javascriptlaravelvue.js
Luis
Luis

Reputation: 437

Vuejs, passing props to data() doesn't work

I can't pass props to data() and I don't know why, I have a inline template:

<network-index inline-template>
...
<network-list :data="networks"></network-list> 
...
</network-index>

In the vue file Index.vue I have this:

import NetworkList from './List.vue';

export default{

components : {NetworkList},

data(){
            return {
                networks: []                
            }
        },

created(){          

      this.getNetworList();            

   },

 methods:{

      getNetworList(){

              axios.post('/network/ajax').then(response => {
                    this.networks = response.data.list;                                            
                });  

      }

    }
}

And this is the List.vue, here is the problem:

<template>      
    <div class="network-list">        
        <div class="row row-list" v-for="(network,index) in items" >
            <network-item :data="network" @deleted="remove(index)"></network-item>            
        </div>
    </div>                                  
</template>

<script>

import NetworkItem from './Item.vue';

    export default{

        props : ['data'],

        components: {NetworkItem},

        data(){
            return {       
                items: this.data
            }
        },
        /*
        mounted(){
            this.items = this.data;
        },
        created(){

            this.items = this.data;
        },*/
        methods:{
            remove(index){                              
                this.items.splice(index,1);
            }
        }
    };
</script>

In the vue console I can see that data in props has and array with objects, those are the network list and it is ok, but items inside data() is empty. I don't know what is happening.

Upvotes: 1

Views: 1910

Answers (1)

Devon Bessemer
Devon Bessemer

Reputation: 35337

This won't work because at the time the NetworkList component is constructed, data (networks) would still be an empty array.

data (networks) is eventually filled by the ajax request in getNetworList() but this wouldn't be until after the NetworkList component is constructed because of the asynchronous nature of ajax requests.

You'd need a watch set up to update items when data changes.

watch: {
   data(val) {
     this.items = val;
   }
}

Upvotes: 3

Related Questions