Question

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

父组件

<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 prop中获取数组。

实际结果：

actual result

Answer 1

这仅仅是推测，但是我猜想在子组件初始化期间，父组件中的this.comanda为空，因此它使用空数组初始化了cmd。

尝试设置

 mounted(){

   this.cmd = this.comanda 
 }

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

return{
  cmd: this.comanda
}

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

无法获得具有prop值的组件数据初始化才能工作

1 个答案: