我在 subview 中更新父属性时遇到问题。就我而言,参赛者是家长,编辑参赛者应该是 child 。 Contestant.vue 应该存储(是的,答案可能就在这里 - 存储在 Vuex 中)用户信息,而 EditContestant 应该只渲染编辑 View ,允许编辑用户信息操作并通过自己的方法或父方法保存它。我已经包含了路由,因此您应该明白我在说什么。
结构是:
Contestant.vue
|-EditContestant.Vue
参赛者.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)
});
路由器/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: '',
}
],
]
})
当我向输入添加内容时,出现错误:
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
和
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)
最佳答案
模板中不需要 this.
,只需使用 $parent
即可。模板已在 this.
范围内。
parent 和 child 之间的沟通应该使用Props down events up ,而不是直接通过 this.$parent.function()
调用函数。您应该先$emit('callFunc')
,然后@callFunc="function"
。
关于javascript - Vue.js 父 <-> 子更新值,路由 View ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55548152/