Vue2将对象作为道具发送到空组件或具有属性的组件

Question

假设我们有两条路线：edit/1和edit/new

根容器(装载时(检查是否存在this.$route.params.id，如果存在，则从API获取数据并填充obj。否则，所讨论的obj保持为空。

此对象被发送到一个子组件，该子组件具有以下内容：

<template>
<input v-model="obj.name">
<input v-model=obj.email">
</template>
<script>
export default {
props: {
obj {
type: Object,
default: () => {}
}
},
}
</script>

我现在遇到的问题是，当我发送一个空对象时，没有任何渲染。这个问题与空对象有关吗？据我所知，属性可以像Vue中这样动态添加。

如果您需要更多信息，请询问！

Answer 1

仅用于记录

default: () => {}

不会默认返回一个空对象。箭头函数将返回void。如果您试图将空对象设置为默认对象，请使用

default: () => ({})

无论如何，由于道具突变不仅不受欢迎，它们在Vue2中被认为是一种反模式(请参阅Vue 2-道具突变Vue警告(，您应该添加一个数据字段，该字段要么已经声明了默认值，要么从相应的道具字段中获取其默认值

props: {
obj: {
type: Object,
default: () => ({ name: '', email: '' })
}
}
data() {
return {
name: this.obj.name,
email: this.obj.email,
}
}

Answer 2

问题是您需要在对象中声明prop成员，或者使用Vue.set从父对象添加新的反应属性。

default: () => ({name:null, email:null})
// or
default: () => { return {name:null, email:null} }

或在父中

Vue.set(defaultObjWithoutMembers, 'name', 'foo')

Vue2无法检测或跟踪不属于原始对象声明的属性。

请参阅https://v2.vuejs.org/v2/guide/reactivity.html