javascript - Vue.js - 父范围不更新的模板

Question

我创建了一个组件，用于以美观的方式显示一些信息。该组件只是内容的包装器，在父组件内部呈现。父组件是这样实现子组件的:

    <my-component v-for="item in items" :key="item.id">
        <template slot="header">
            {{ item.title }}
        </template>
        <template slot="meta">
            <div>
                <template v-if="typeof item.additionalData != 'undefined'">
                    {{ item.additionalData.text }}
                </template>
            </div>
        </template>
    </my-component>

它工作正常，直到我想更改数据。 items 是父组件中的一个变量，在渲染时，数据以正确的方式解析。当我在渲染后更改 items 内部的内容时，子组件无法识别它。原因是因为 item.additionalData 是在组件已经呈现后通过 AJAX 调用添加的。

文档说

Everything in the parent template is compiled in parent scope; everything in the child template is compiled in child scope.

但似乎这只在渲染时是正确的。

我是否无法以这种方式使用我的组件，或者是否有解决方案？

Answer 1

来自docs :

Due to the limitations of modern JavaScript (and the abandonment ofObject.observe), Vue cannot detect property addition or deletion.Since Vue performs the getter/setter conversion process duringinstance initialization, a property must be present in the data objectin order for Vue to convert it and make it reactive.

所以我怀疑您的 item.additionalData 字段最初是未定义的，这意味着它在添加时会被 Vue 遗漏。最好的解决方案是定义 item.additionalData，但设置为 null 或 false。如果那不可能，请考虑使用 Vue.set(object, key, value) 概述 here .