I'm facing an issue where I am unable to pass props to data() in my Vue inline template:
<network-index inline-template>
...
<network-list :data="networks"></network-list>
...
</network-index>
Inside the Index.vue file, here is how I have set it up:
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;
});
}
}
}
Below is the List.vue file code where I am encountering a 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
}
},
methods{
remove(index){
this.items.splice(index,1);
}
}
};
</script>
While checking the vue console, I noticed that the data in props contains an array with objects, which is the network list and looks fine. However, the items inside data() appears to be empty. I am unsure of what could possibly be causing this issue.