Question

我在App.vue中获取数据。我将其拆分，然后将它们作为道具分发给我的组件。但是，要在我的chart.js中输入的数据是不确定的，当我进行console.log记录以查看其结构时，就像我周围有大量的观察者一样，因此我无法找出最新情况。每当我尝试在其中记录所需内容时，它都会返回未定义的内容。我写了一条if语句，检查this.agentTickets是否未定义，返回true。

没有进行谷歌搜索，未定义的道具有很多问题，但是我没有从阅读的书中得到答案。

App.vue（获取，定义和传递道具）

DocumentBuilderFactory

AgentStats.vue（将在图表中加载并填充数据）

<div>
   <AgentStats v-bind:agent-tickets="agentTickets" />            
</div>

data() {
    return {
        activeTickets: [],

        newTickets: [],

        completedTickets: [],

        agentTickets: []
    }
},

fetch('/api/scotttickets')
        .then(res => res.json())
        .then(resJson => {
            this.agentTickets = resJson
});

我正在获取的数据：

name: 'AgentStats',
components: {
    BarChart
},
props:['agentTickets'],
data() {
    return {
        agentData: null
    }
},
mounted() {
    if(this.agentTickets !== 'undefined') {
            console.log('Er zit wat in hoor')
    }
    this.fillChart()
    console.log(this.agentTickets)
},
methods: {
    fillChart() {
        this.agentData = {
            //labels: [this.agentTickets[0]]
        }
    }
}
}

因此，现在当我尝试显示this.agentTickets.scottsTickets时，它返回未定义的值，我希望它返回数组，以便使图表数据具有响应性。

Answer 1

这是因为您在prop标识符中有一个-。 :agent-tickets="agentTickets"删除破折号，我也发现这是一个问题。

Vue道具未定义

1 个答案: