Laravel 在数据中设置初始值时不读取VueJs道具

最近，我一直在为如何在本地数据属性中设置初始值而苦苦挣扎。我正在将Laravel与Vue.js一起使用

我的组件中有以下代码

props: {
            user: '',
            dates: {}
        },
        data() {
            return {
                bloodTypes: {},
                bloodComponents: {},
                data: {
                    order_date: this.dates.order_date,
                    order_details: []
                },
            }
        },

我试图将道具“dates”的值输入到局部变量中

order_date: this.dates.order_date

返回未定义。尽管你可以在下图中看到道具已经初始化。

我想知道如何将道具值输入本地数据 变量

---

用computed代替怎么样

    props: [
        'user',
        'dates'
    ],
    data() {
        return {
            bloodTypes: {},
            bloodComponents: {}
        }
    },
    computed: {
        data: function() {
            return {
                order_date: this.dates.order_date,
                order_details: [] <= should be changed to something dynamically changed object
            }
        }
    }

---

用computed代替怎么样

    props: [
        'user',
        'dates'
    ],
    data() {
        return {
            bloodTypes: {},
            bloodComponents: {}
        }
    },
    computed: {
        data: function() {
            return {
                order_date: this.dates.order_date,
                order_details: [] <= should be changed to something dynamically changed object
            }
        }
    }

问题是你的道具声明不正确

props: {
  user: '',  // <-- DON'T DO THIS
  dates: {} // <-- DON'T DO THIS
}

…或对象初始值设定项，允许您指定数据类型和默认值，如下所示：

props: {
  user: {
    type: String,
    default: ''
  },
  dates: {
    type: Object,
    default: () => ({})
  }
},

问题是你的道具声明不正确

props: {
  user: '',  // <-- DON'T DO THIS
  dates: {} // <-- DON'T DO THIS
}

…或对象初始值设定项，允许您指定数据类型和默认值，如下所示：

props: {
  user: {
    type: String,
    default: ''
  },
  dates: {
    type: Object,
    default: () => ({})
  }
},

试试这个：

watch: {
  dates: {
    handler(val){
     this.data.order_date = val.order_date;
  },
  deep: true
 }
}

试试这个：

watch: {
  dates: {
    handler(val){
     this.data.order_date = val.order_date;
  },
  deep: true
 }
}

在创建或安装的挂钩中指定值

示例：

在创建或安装的挂钩中指定值

---

示例：

我最终解决了这个问题，我更改了一些变量名，这样我就不会感到困惑。看来你需要把道具放在监视之下才能操纵它

props: [ 'user','blood_components', 'blood_types', 'current_date'],
        data() {
            return {
                list: {
                    order_date: '',
                }
            }
        },
        watch:{
            current_date: function() {
                let self = this
                self.list.order_date = this.current_date
            }
        },

---

我终于解决了这个问题，我已经更改了一些变量名，这样我就不会感到困惑了。看来你需要把道具放在监视之下才能操纵它

props: [ 'user','blood_components', 'blood_types', 'current_date'],
        data() {
            return {
                list: {
                    order_date: '',
                }
            }
        },
        watch:{
            current_date: function() {
                let self = this
                self.list.order_date = this.current_date
            }
        },

---

参加聚会有点晚，但我想在处理异步数据时，我会与大家分享我的解决方法：

// in the parent component
<template>
    <child :foo="bar" v-if="bar" />
</template>

---

快乐编码

参加聚会有点晚了，但我想在处理异步数据时分享一下我的解决方法：

// in the parent component
<template>
    <child :foo="bar" v-if="bar" />
</template>

---

快乐编码

您确定没有覆盖创建或安装的挂钩中的data.order\u date吗？你能试着将这个data.order\u date设置为string foo来检查它是否会继续存在吗？我已经删除了挂载并创建了相同的数据。直接调用时，道具将在模板中工作，但在组件中未定义。请尝试在mounted中使用order_date:this.dates.order_date，它应该可以工作。如何填充道具？因为我认为道具是在安装vue后填充的，这就是为什么它无法获取数据值的原因。您确定没有覆盖创建或安装的挂钩中的数据。订单日期？你能试着将这个data.order\u date设置为string foo来检查它是否会继续存在吗？我已经删除了挂载并创建了相同的数据。直接调用时，道具将在模板中工作，但在组件中未定义。请尝试在mounted中使用order_date:this.dates.order_date，它应该可以工作。如何填充道具？因为我认为道具是在安装vue后填充的，这就是为什么它在返回空且未定义的数据之前无法获取数据上的值。为什么要初始化道具对象？尝试使用阵列作为道具。我在传递objectstype时遵循了这一点，默认值可以设置为objectstype，但它仍然返回空的和未定义的。为什么要初始化props对象？尝试使用阵列作为道具。我在传递objectstype时遵循了这一点，默认值可以设置为object