无法使用 prop 值进行组件数据初始化工作

Question

我正在尝试将数组作为道具传递给子组件以在本地使用它。主要想法是能够在子组件中编辑此数组，然后通过 axios 将其传递给 php。 当我尝试使用道具初始化孩子的本地数据时，我得到一个空数组作为数据。

父组件

<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>

子组件

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

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

  }
};
</script>

预期结果： 在我的子组件中，cmd 应该从 comanda 属性中获取数组。

实际结果：

actual result

Answer 1

这只是猜测，但我猜测在您的子组件初始化期间，您的父组件中的 this.comanda 是空的，因此它用空数组初始化 cmd。

尝试设置

 mounted(){

   this.cmd = this.comanda 
 }

如果这不起作用，则意味着您正在更改父级中的 comanda 变量，因此

return{
  cmd: this.comanda
}

不起作用，因为这只会在变量的第一次初始化中设置 cmd。