首页 > 解决方案 > Vuejs,如何构建一个对象?

问题描述

您好,我正在尝试通过 API 在我的网站上显示图形,要在列中显示我的图形,我需要向他发送一个像这样的对象

data: [{
            name: 'Data1',
            data: [
              ['ALIONIVS', 1],
              ['GARCIC(I)VS', 1],
              ['NONIVS', 1],
              ['SERVERS,A', 1]
            ],
          },
          {
            name: 'Data2',
            data: [
              ['TVTOR', 1],
              ['FVSCINVS', 1],
              ['GVTAMVS / GVMATIVS', 1],
              ['SEVERINVS, -A', 1],
              ['TVSCVS, -A / TVSGVS', 1],
              ['VEIENTA', 1],
            ]
          }
        ],

但是我想要动态数据,我正在使用 axios 从我的 api 中检索数据。

        axios
          .get('../api/civitasnomen/' + this.searchInputcivitas)
          .then(response => {
            this.data1 = response.data.map(item => {
              return [item.lemme, item.nb];
            })
          })

        axios
          .get('../api/civitascognomen/' + this.searchInputcivitas)
          .then(response => {
            this.data2 = response.data.map(item => {
              return [item.lemme, item.nb];
            })
          })

在我的对象中,我想同时检索我的 api 数据

如果在 axios 中这样写:

axios .get('../api/civitasnomen/' + this.searchInputcivitas) .then(response => this.data1 = response.data)

例如数据1 =

[ { "nb": 1, "lemme": "ALIONIVS" }, { "nb": 1, "lemme": "GARIC(I)VS" }, { "nb": 1, "lemme": "NONIVS, -A" }, { "nb": 1, "lemme": "SEVERVS, -A" } ] 

和数据2 =

[ { "nb": 1, "lemme": "TVTOR" }, { "nb": 1, "lemme": "FVSCINVS" }, { "nb": 1, "lemme": "GVTAMVS / GVMATIVS" }, { "nb": 1, "lemme": "SEVERINVS, -A" }, { "nb": 1, "lemme": "TVSCVS, -A / TVSGVS" }, { "nb": 1, "lemme": "VEIENTA" } ]

标签: javascriptvue.jsvuejs2axioschart.js

解决方案


假设您将data属性初始化为空数组:

data(){
  return {
   data: [],

  }
}

然后使用来自 API 的结果更新它:

 axios
          .get('../api/civitasnomen/' + this.searchInputcivitas)
          .then(response => {
             this.data.push({
               name:'data1',
               data:response.data.map(item => {
              return [item.lemme, item.nb];
            })
            })
          })

        axios
          .get('../api/civitascognomen/' + this.searchInputcivitas)
          .then(response => {
             this.data.push({
               name:'data2',
               data:response.data.map(item => {
              return [item.lemme, item.nb];
            })
          })

推荐阅读