时间戳

首页 > 解决方案 > 从父组件的 for 循环传递数据时，Watcher 不起作用

javascript - 从父组件的 for 循环传递数据时，Watcher 不起作用

问题描述

<div v-for= "(item , index) in chartData"  class="col" :key="index">
  <ColumnChart
    :chartdata="item.tactical"
    :simpletype="true"
  />
</div>

MychartData是一个包含空数组的属性。

在使用对象数组填充服务器请求之后。

在上面的 for 循环中，我将这些数据传递给名为“ColumnChart”的子组件。

我的问题是子组件的观察者似乎无法正常工作。

 watch: {
        chartdata(val) { 
            console.log(val) // This val never appears in the console
            if (val !== null) {
                this.initChart();
            }

            if (val.length === 0) {
                this.initLoading();
            }

        },
    },

真正奇怪的是，子组件的 props 中填充了来自父组件的数据。

此外，当我不使用循环直接传递数据时，一切正常。

<ColumnChart
  :chartdata="chartData.length > 0 ? chartData[0].tactical : []"
  :simpletype="true"
/>

有任何想法吗？

标签： javascriptvue.jsvue-component

解决方案

您的观察者配置中有错字，它应该是chartData而不是chartdata.

推荐阅读