I’m trying to pass an array as prop to a child component to use it there localy.The main idea would be to be able to edit this array in child component and then pass it to php via axios.
When i try to initialize the childs local data with the prop i get an empty array as data.

parent component

<template>
<stocare-comanda v-if=”isStocareComandaActive == true” :comanda=”comanda” :id=”id”></stocare-comanda>
</template>

<script>
export default {
data: function() {
return {
lista: [],
comanda: [],
id: “”,
isStocareComandaActive: “false”
};
},
methods:{
stocare: function() {
this.id = event.currentTarget.id;
this.isStocareComandaActive = true;
axios
.post(“../stocare/deschide_comanda”, { id: this.id })
.then(response => {
this.comanda = response.data.data;
// console.log(response.data);
});
}
}
};
</script>

child component

<script>
export default {
props: [“id”, “comanda”],

data: function() {
return {
cmd: this.comanda
};
},
methods: {},
mounted() {

}
};
</script>

Expected result:
In my child component, cmd should get the array from comanda prop.

Actual result:

actual result

Solution :

this is merely speculation but when guessing during the initialization of the child component, this.comanda in the parent component is empty, and thus it initializes cmd with empty array.

try setting

mounted(){

this.cmd = this.comanda
}

if this doesn’t work it means you are changing comanda variable in the parent so

return{
cmd: this.comanda
}

doesn’t work, because this only sets cmd in the first initialization of the variable.