Question

我有一个绑定到对象上的组件，父组件更改了其对象的属性。子组件应对此更改做出反应。

子组件：

import { Component, Emit, Inject, Model, Prop, Provide, Vue, Watch } from 'vue-property-decorator'

@Component({
    props: {
        value: Object,
    }
})
class ValidatedSummaryComponent extends Vue {
    value: any;
    field = "Name";
    v: any;

    created() {
        console.log("!", this.value);
        this.v = this.value;
    }

    state: string | null = null;
    error = "";

    @Watch('value')
    onValueChanged(val: any, oldVal: any) {
        console.log("Value called", val);
        this.v = val;
        this.onChanged();
        this.$forceUpdate();
    }

    private onChanged() {
        if (typeof this.v.validationErrors[this.field] == 'undefined') {
            this.state = null;
            this.error = "";
        } else {
            this.state = 'invalid';
            this.error = this.v.validationErrors[this.field].join();
        }
    }
}

export default ValidatedSummaryComponent;

用法：

<ValidatedSummary v-bind:value="bindableObject"></ValidatedSummary>

然后我这样做：

bindableObject.Name = 'New name'

我需要我的组件ValidatedSummaryComponent做出反应。

我可能可以将其绑定为单独的属性：

<ValidatedSummary v-bind:value="bindableObject.Name"></ValidatedSummary>

，但在最终设计中，组件应监视BindableObject的所有属性，并且会有一些不同的BindableObjects具有不同的属性集，因此我可以只需按属性将其绑定。

我设法使其起作用的唯一方法是强制vue.js更新整个对象，以确保vue.js相等性检查未通过：

this.bindableObject = Object.assign(new BindableObject(), this.bindableObject );

但这非常麻烦，因为我必须在每次更改时都执行此操作，因此我正在寻找一种更好的方法来处理此问题。最好在上面的代码中删除this.$forceUpdate();，但我可以幸免。

Answer 1

好吧，强制更新一下。它将使您的生活更轻松

vm.$forceUpdate();

如文档中所述

强制重新渲染Vue实例。请注意，这并不影响所有子组件，只有实例本身和具有插入的广告位内容。

但是，仅当您没有其他选择时才建议使用（仅作为最后一个选择）。

那么您还可以使用其他哪些选项来使其起作用。（取决于代码设计）

尝试使用Vue.set（）。或者，
重新分配更改的对象。

Answer 2

将我的评论转换为答案。

您可以尝试使用manual所示的deep的{{1}}选项

更改子属性时，强制vue.js刷新属性

2 个答案: