vue.js - VueJS 2 : Child does not update on parent change (props)

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)。