I'm emitting an object via event bus to the parent and then assigning that object to my detail variable which is to be passed as a prop to my ContactDetail component, but the prop isn't getting the updated object.
ContactCard is a component imported in ContactList.
Getting the following error:
[Vue warn]: Property or method "contactDetail" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property.
ContactCard
<script>
import {bus} from "../../bus.js";
export default {
name: "ContactCard",
methods: {
showDetails: function(event) {
bus.$emit('showDetails', { pfp: this.pfp, name: this.name, address: this.address });
}
}
}
</script>
AddressBook
<template>
<div class="container">
<ContactList v-if="!showDetail"></ContactList>
<ContactDetail v-else :contactDetail="details"></ContactDetail>
</div>
</template>
<script>
import { bus } from "../bus.js";
import ContactList from "../components/addressBook/ContactList.vue";
import ContactDetail from "../components/addressBook/ContactDetail.vue";
export default {
name: "AddressBook",
components: {
ContactList,
ContactDetail
},
data() {
return {
showDetail: false,
details: {}
}
},
created() {
bus.$on('showDetails', (data) => {
console.log(data);
this.showDetail = true;
this.details = Object.assign({}, this.details, data);
console.log(this.details);
});
}
}
</script>
ContactDetail
<template>
<div class="detail-container">
{{contactDetail}}
</div>
</template>
<script>
export default {
name: "ContactDetail",
data() {``
return {
details: ''
}
},
props: {
contactDetail: {
type: Object,
required: true
}
},
watch: {
contactDetail(newVal, prevVal) {
this.details = newVal;
}
}
}
</script>
Why isn't the contactDetails prop updated in ContactDetail?
Accidentally had two script sections instead of script and style.
Before
<template>
<div class="detail-container">
{{details}}
</div>
</template>
<script>
import { bus } from "../../bus.js";
export default {
name: "ContactDetail",
data() {
return {
}
},
props: {
details: {
type: String,
required: true
}
}
}
</script>
<script>
</script>
After
<template>
<div class="detail-container">
hellow
{{details}}
</div>
</template>
<script>
import { bus } from "../../bus.js";
export default {
name: "ContactDetail",
data() {
return {
pfp: "",
name: "",
address: ""
}
},
props: {
details: {
type: String,
required: true
}
}
}
</script>
<style>
</style>