Question

我正在尝试使用其他类的属性创建v-for循环（要在多个组件上使用）

Now.vue的html代码

<tr v-for="(el, index) in rendering.elements" :key="index">
    <td>{{index + 1}}</td>
    <td>{{el.name}}</td>
</tr>

Now.vue的Ts

    @Component
    export default class Now extends Vue {
        @Prop() private rendering: Render = new Render();

        /**
         * On vue created
         */
        public created () : void
        {
            ApiClient.executeRequest('GET', '/api/stock/state')
                .subscribe((response: any): void => {
                    this.rendering.elements = response.data.result;
                })
        }
    }

rendering.elements设置了很好的值，但是v-for没有更新

此代码有效：

<tr v-for="(el, index) in elements" :key="index">
    <td>{{index + 1}}</td>
    <td>{{el.name}}</td>
</tr>

    @Component
    export default class Now extends Vue {
        @Prop() private elements: Array<any> = [];

        /**
         * On vue created
         */
        public created () : void
        {
            ApiClient.executeRequest('GET', '/api/stock/state')
                .subscribe((response: any): void => {
                    this.elements = response.data.result;
                })
        }
    }

为什么？

Answer 1

使用Vue.set：

private rendering: Render = new Render()

public created (): void {
    ...
    Vue.set(this.rendering, 'elements', response.data.result)
    ...
}

如@RoyJ所述，这是Vue反应性的限制。该对象及其属性必须存在于组件上，使用set添加可观察的属性。

Vue：v-for，如何从外部类循环属性

1 个答案: