I'm encountering an issue with updating the parent prop in a child view. In my setup, Contestant serves as the parent component, and EditContestant is the child component. Contestant.vue should be responsible for storing user information (potentially using Vuex), while EditContestant.vue's role is to render the edit view, allow for editing user information, and saving it either through its own method or the parent's method. I've set up routing to help illustrate this structure.
The structure looks like this:
Contestant.vue
|-EditContestant.Vue
In Contestant.vue:
<script>
export default {
data() {
return {
contestant: {
id: this.$route.params.id,
gender: '',
firstname: '',
lastname: '',
},
}
},
methods: {
fetchContestant(id) {
//some api call here
vm.updatePropContestant(res.data);
// ...
},
updatePropContestant(newData) {
if (!this.contestant || this.contestant.length === 0) {
this.contestant = {};
}
this.contestant.firstname = newData.firstname;
this.contestant.lastname = newData.lastname;
this.contestant.id = newData.id;
this.contestant.gender = newData.gender;
// this.$forceUpdate();
},
},
}
</script>
<template>
<div>
<router-view :contestant="contestant" @interface="contestant = $event"></router-view>
</div>
</template>
EditContestant.vue
<script>
export default {
data() {
console.log('data');
return {
editContestant: {
id: '',
'firstname': '',
'lastname': '',
'gender': 0
},
edit: false
}
},
props: ['contestant'],
created: function () {
// tried also to fetchContestant if parent beforeCreate method with same result, so tried moving it here :(
this.$parent.fetchContestant(this.$route.params.id);
}
}
</script>
<template>
<div class="col">
<input id="firstname" v-model="this.$parent.contestant.firstname" type="text" class="form-control" placeholder="First name"
<!-- this doesn't help either v-on:input="updateParentValue($event.target.value)" --> >
</div>
</template>
app.js
require('./bootstrap');
window.Vue = require('vue');
import router from './router';
new Vue({
el: "#app",
router,
// render: h => h(app)
});
router/index.js
import contestantComponent from '../components/Contestant/Contestant'
import contestantEditComponent from '../components/Contestant/EditContestant'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/contestant/:id',
component: contestantComponent,
children: [
{
name: 'Contestant edit',
component: contestantEditComponent,
path: '/contestant/:id?/edit',
},
{
name: 'View contestant',
component: ViewContestantComponent,
path: '',
}
],
]
})
When I add something to the input I get an error:
found in
---> <EditContestant> at resources/js/components/Contestant/EditContestant.vue
<Contestant> at resources/js/components/Contestant/Contestant.vue
<Root>
warn @ app.js:41366
logError @ app.js:42625
globalHandleError @ app.js:42620
handleError @ app.js:42580
invokeWithErrorHandling @ app.js:42603
invoker @ app.js:42916
original._wrapper @ app.js:48273
and
app.js:42629 TypeError: Cannot read property '$parent' of null
at _c.on.input (app.js:37434)
at invokeWithErrorHandling (app.js:42595)
at HTMLInputElement.invoker (app.js:42916)
at HTMLInputElement.original._wrapper (app.js:48273)