Vue.js父<->子级更新值，路由视图 [英] Vue.js parent <-> child updating value, routing view

问题描述

我在更新子视图中的父道具时遇到问题。在我的情况下，参赛者是父母，EditContestant应该是孩子。 Contestant.vue应该存储（是的，可能的答案就在这里-存储在Vuex中）用户信息，而EditContestant应该仅呈现编辑视图，允许编辑用户信息操作并通过自己的方法或父方法保存。我已经包括了路由，所以您应该了解我在说什么。

I'm having issue regarding updating parent prop in child view. In my case Contestant is parent, EditContestant should be child. Contestant.vue should store (yeah, probably answer is right here - store as in Vuex) user info and EditContestant should only render edit view, allow for edit user info action and save it via own method or parent method. I've included routing so you should get what I'm talking about.

结构为：

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

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

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

和

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。范围内。

You don't need this. in template, just use $parent. Template is already in the this. scope.

父母与孩子之间的交流应使用 启动事件 ，而不是通过 this。$ parent.function直接调用该函数（）。您应该 $ emit（’callFunc'），然后 @ callFunc = function 。

The communication between parent and child should be using Props down events up, instead of directly call the function thru this.$parent.function(). You should $emit('callFunc') then @callFunc="function".

这篇关于Vue.js父<->子级更新值，路由视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！