I have the following components:
Parent Component:
<template>
<v-container>
<v-row class="text-center">
<v-col cols="12" class="parent">
<p>I am the Parent component</p>
<button @click="changeDetail" :name.sync="name">Change Details</button>
<Child v-bind:name="name"></Child>
</v-col>
</v-row>
</v-container>
</template>
<script>
import Child from "./Child";
export default {
name: "Parent",
data: () => ({
name: "test"
}),
methods: {
changeDetail() {
this.name = "Updated from Parent";
}
},
components: {
Child
}
};
</script>
Child Component:
<template>
<v-container>
<v-row class="text-center">
<v-col cols="12">
<p>My name is: {{ name}}</p>
<button @click="resetName">Reset the name</button>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
props: {
name: {
type: String,
required: true
}
},
data: () => ({
newName: "Updated from Child"
}),
methods: {
resetName() {
this.$emit("update:name", this.newName);
}
}
};
</script>
In reference to https://v2.vuejs.org/v2/guide/components-custom-events.html#sync-Modifier, I attempted using update and sync to pass props from child to parent, but it did not work as expected. Can someone help me identify what might be missing or incorrect in my code?