Vue.js 如何将数据放入标签、值（Vue JS）中

我开始学习Vue.js，我试图在我的项目中创建一个饼图。也使用（apexchart）。我从Axios获得数据。我想显示标签和值内的数据，如何管理它。这是app.vue

<template>
  <div id="app">
    <!-- <HelloWorld msg="Welcome to Your Vue.js App" /> -->
    <NavBar msg="Rick & Morty" />
    <PieChart
      :data="[
        { label: 'Human', value: 60 },
        { label: 'B', value: 40 },
        { label: 'C', value: 20 },
        { label: 'D', value: 10 }
      ]"
    />
    <Profile msg="Justin Rolland" />
  </div>
</template>



<script>
import NavBar from "./components/NavBar.vue";
// import HelloWorld from "./components/HelloWorld.vue";
import PieChart from "./components/PieChart.vue";
import Profile from "./components/Profile.vue";
import axios from 'axios';


export default {
  name: "App",
  components: {
    // HelloWorld,
    NavBar,
    PieChart,
    Profile
  },
   mounted() {
    axios
      .get("/data/episodes.json")
      .then(response => {
        console.log(response);
      });
  }
};
</script>

从“/components/NavBar.vue”导入导航栏；
//从“/components/HelloWorld.vue”导入HelloWorld；
从“/components/PieChart.vue”导入PieChart；
从“/components/Profile.vue”导入配置文件；
从“axios”导入axios；
导出默认值{
名称：“应用程序”，
组成部分：{
//HelloWorld，
导航栏，
皮查特，
轮廓
},
安装的（）{
axios
.get（“/data/scents.json”）
。然后（响应=>{
控制台日志（响应）；
});
}
};

使用指令，可以使用字符串插值

:data="[
        { label: `${data.label}`, value: 60 },
        { label: 'B', value: 40 },
        { label: 'C', value: 20 },
        { label: 'D', value: 10 }
      ]"

您需要将Axios

响应.数据

存储在组件的

数据

中