Question

我知道这个问题经常出现在Stackoverflow中，但是即使答案很多，我也无法解决我的答案。

我在我的父组件中使用axios get调用，然后通过props将数据发送到子组件。我想将道具传递给数据以重新使用它们来构建图表竞争apexChart。并且实例无法识别数据。

testList = [
    [(0.0, -1.0), (0.5, -0.002), (2.0, -0.1613676), (2.5, 1.08492417852)],
    [(0.0, -0.99604032), (0.5, -1.0), (2.0, -0.1613832766676), (2.5, 1.0849852)],
    [(4.5, 0.154484), (5.0, -1.0), (5.5, -0.34), (6.0, -0.44)],
    [(88.5, 3127.7763767), (89.0, 13.449714), (90.0, -1.0)]
]


def c_slice(rows):
    for row in rows:
        for idx, (_, y) in enumerate(row):
            if y == -1:
                start = row[:idx + 1]
                end = row[idx:]
                start = [(0, 0)] + start if all([y < 0 for _, y in start]) else start
                end = end + [(90, 0)] if all([y < 0 for _, y in end]) else end
                yield [start, end]
                break


out = list(c_slice(testList))

for i in out:
    print(i)

似乎allDatas是未定义的。有想法吗？

ps：我在父组件中的axios调用在一个已创建的函数中。

谢谢！

Answer 1

这是父组件：


<template>
  <div style="margin-top:100px" class="home">
    <RadialChartPage v-bind:radialChartDatas="radialChartDatas" />
  </div>
</template>

<script>
import RadialChartPage from "@/components/RadialChartPage.vue";
import axios from "axios";
export default {
  name: "RadialChart",

  components: {
    RadialChartPage
  },

  data() {
    return {
      radialChartDatas: []
    };
  },

  created() {
    axios
      .get(`http://localhost:3005/submit/` + this.$route.params.id)
      .then(response => {
        this.radialChartDatas = response.data;
      })
      .catch(e => {
        console.log(e);
      });
  }
};
</script>

</style>

Answer 2

原因是Vue中的Reactivity系统。只需更改以下

this.radialChartDatas = response.data;

到

this.radialChartDatas.push(...response.data);

您可以阅读有关Array Change Detection

的信息

将道具传递给数据vuejs

2 个答案: