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>

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

文档说

父模板中的所有内容都在父作用域中编译;子模板中的所有内容都在子范围内编译。

但似乎只有在渲染时才这样。

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

Answer 1

来自docs：

由于现代JavaScript的局限性（以及放弃 Object.observe），Vue无法检测属性添加或删除。由于Vue在执行期间执行getter / setter转换过程实例初始化时，属性必须存在于数据对象中为了让Vue转换它并使其反应。

所以我怀疑你的item.additionalData字段最初是未定义的，这意味着Vue稍后会被添加时错过。最佳解决方案是定义item.additionalData，但设置为null或false。如果无法做到这一点，请考虑使用Vue.set(object, key, value)概述here。

Answer 2

我在向项目模板添加搜索图标时遇到了类似的问题。我解决它的方法是使（根据你的例子）additionalData一个计算属性，然后完全被动。这是基本形式：

computed: {
  additionalDataText() {
    return item.additionalData ? item.additionalData.text : null
  }
}

我不清楚您的代码是显示父组件还是子组件实际上，您可以进行的最简单的更改要求计算属性接收项作为参数，如下所示：

computed: {
  additionalDataText() {
    return function (item) {
      return item.additionalData ? item.additionalData.text : null
    }
  }
}

，您的模板将是

<my-component v-for="item in items" :key="item.id">
    <template slot="header">
        {{ item.title }}
    </template>
    <template slot="meta">
        <div>
            <template v-if="additionalDataText(item)">
                {{ additionalDataText(item) }}
            </template>
        </div>
    </template>
</my-component>

这项技术来自Unirgy对这个问题的回答：Can I pass parameters in computed properties in Vue.Js。关于这种方法存在一些争议，但我在我的项目中尝试过它似乎有效请注意，在引用的问题中，接受的答案建议使用方法，但这并不能提供您所需的反应性。

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

2 个答案: