VueJS 2：孩子不会因父母变更（道具）而更新

Question

当我更新父级的singleIssue变量时，它在我的<issue>组件中没有得到更新。我正在使用props将其传递到那里。我已经在其他项目中实现了这一目标，但是我似乎无法理解我做错了什么。

我将代码简化为相关部分，因此更易于理解。

IssueIndex.vue：

<template>
    <div class="issue-overview">
        <issue v-if="singleIssue" :issue="singleIssue"></issue>

        <v-server-table url="api/v1/issues" :columns="columns" :options="options" ref="issuesTable">
            <span slot="name" slot-scope="props">{{props.row.name}}</span>

            <div slot="options" slot-scope="props" class="btn-group" role="group" aria-label="Order Controls">
                <b-btn class="btn-success" v-b-modal.issueModal v- 
on:click="showIssue(props.row)">Show</b-btn>
            </div>
        </v-server-table>
    </div>
</template>

<script>
    export default {
        mounted() {
            let app = this;

            axios.get('api/v1/issues/')
                .then(response => {
                    app.issues = response.data;
                })
                .catch(e => {
                    app.errors.push(e);
                }); 
        },
        data: () => {
            return {
                issues: [],
                singleIssue: undefined,
                columns: ['name', 'creation_date', 'options'],
                options: {
                    filterByColumn: true,
                    filterable: ['name', 'creation_date'],
                    sortable: ['name', 'creation_date'],
                    dateColumns: ['creation_date'],
                    toMomentFormat: 'YYYY-MM-DD HH:mm:ss',
                    orderBy: {
                        column: 'name',
                        ascending: true
                    },
                    initFilters: {
                        active: true,
                    }
                }
            }
        },
        methods: {
            showIssue(issue) {
                let app = this;

                app.singleIssue = issue;

                // This gets the action history of the card
                axios.get('api/v1/issues/getCardAction/' + issue.id)
                    .then(response => {
                        app.singleIssue.actions = response.data;
                    })
                    .catch(error => {
                        // alert
                    });
            }
        }
    }
</script>

Issue.vue：

<template>
    <div>
        {{ issue }}
    </div>
</template>

<script>
    export default {
        props: ['issue']
    }
</script>

因此，showIssue()被触发后，它将针对该问题采取措施。但是在那之后，我看不到问题组件中的动作。

如果我使用表单输入更新问题组件中的issue模型，它还将开始显示操作。因此，我认为它处于一种奇怪的状态，需要刷新。

谢谢！

Answer 1

如果singleIssue.actions属性在设置时不存在，Vue将无法检测到它。您需要使用$set，或仅在将singleIssue分配给app之前定义属性。

更改此：

app.singleIssue = issue;

对此：

issue.actions = undefined;
app.singleIssue = issue;

app.singleIssue属性是反应性的（因为它是在data节中声明的），因此Vue会检测到该属性何时被分配给新值，如果尚未设置新值，则使其具有反应性。在分配issue时，将使其变为无响应的 ，而没有actions属性，并且Vue无法检测到稍后何时将新属性添加到响应对象（因此为什么在这种情况下需要$set。