Vuejs，如何构建一个对象？答案

【问题标题】：Vuejs, how to build an object?Vuejs，如何构建一个对象？
【发布时间】：2020-10-13 08:10:24
【问题描述】：

您好，我正在尝试通过 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" } ]

【问题讨论】：

API 返回的数据是什么样的？我的意思是`this.data = response.data`和`this.data2 = response.data`
@BoussadjraBrahim data1 = [ { "nb": 1, "lemme": "ALIONIVS" }, { "nb": 1, "lemme": "GARIC(I)VS" }, { "nb": 1, "lemme": "NONIVS, -A" }, { "nb": 1, "lemme": "SEVERVS, -A" } ] 和 data2: [ { "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" } ]
您的问题不清楚，您先提供的数据与api返回的数据没有任何共同特征
@BoussadjraBrahim 我想让数据对象动态化。 data > name 是 fixe Data1 或 Data2 但我想要 data > data dynamic 。我已更改数据对象以匹配我的 api

标签： javascript vue.js vuejs2 axios chart.js

【解决方案1】：

假设您将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];
            })
          })

【讨论】：

非常感谢您的帮助，您对我的帮助很大，它运行良好。谢谢