将检索到的数据从 MongoDB 插入到 vue 脚本行数组中的数组中答案

【问题标题】：insert retrieved data from MongoDB to an array in vue script line array将检索到的数据从 MongoDB 插入到 vue 脚本行数组中的数组中
【发布时间】：2021-04-12 01:28:46
【问题描述】：

通过 REST API，我运行了一个查询并从 MongoDB 获得了一个结果（检索到的数据）。

在 .vue 文件上，我想将这些数据插入到数组中

我可以在控制台的“async created()”方法中打印从 MongoDB 检索到的数据但不知道如何将其放入 chartData 数组中...

检索到的数据遵循此表单

{
"_id" : {
    "year" : "2020",
    "month" : "11",
    "day" : "17",
    "failure_count" : 0.0,
    "success_count" : 1.0
}
}

想把那些数据像这样放

data:()=>({
   chartData:[
       ["Date", "Success_count", "Failure_count"],
       [year+month+day, 3, 5]
       ....
   ]
})

以下是我的代码

<script>
// @ is an alias to /src
import PostService from "../PostService";
export default {
name: "PostComponent",

data: () => ({
chartData: [
  ["Date", "Success_count", "Failure_count"],
  ["2014-xx-xx", 1000, 400],
  ["2015-xx-xx", 1170, 460],
  ["2016-xx-xx", 660, 400],
  ["2017-xx-xx", 1030, 540],
  ["2018-xx-xx", 1025, 530],
  ["2019-xx-xx", 1040, 560],
  ["2020-xx-xx", 1040, 560]
],
chartOptions: {
  chart: {
    title: "",
    subtitle: ""
  }
}
}),
async created() {
try {
  this.posts = await PostService.get_dashboard_Posts();
  console.log('this posts : ' , this.posts  )
} catch (err) {
  this.error = err.message;
}
},
components: {},
computed: {
  theme() {
  return this.$vuetify.theme.dark ? "dark" : "light";
}
},
methods:{
openLink(link){
  window.open(link, '_blank');
}
}
};
</script>

任何帮助或提示？ :S

【问题讨论】：

标签： node.js mongodb vue.js vuetify.js

【解决方案1】：

它几乎可以在任何地方完成，但我想在您的 REST 调用下执行它是一个好主意。

顺便说一句，更喜欢这种形式的数据

data() {
  return {
    ...
  }
}

PS：如果您打算使用数组但又希望它们具有响应性，请也要小心一些 vue caveats。

编辑：所以，假设我们将您的新行放入 newLine 变量中

const newLine = {
  "_id" : {
      "year" : "2020",
      "month" : "11",
      "day" : "17",
      "failure_count" : 0.0,
      "success_count" : 1.0
  }
}

这种代码应该有助于实现您的要求，它将一个新数组（以及所要求的格式）附加到您的 chartData 数组中。

this.chartData = [...this.chartData, [`${newLine._id.year}-${newLine._id.month}-${newLine._id.day}`, newLine._id.success_count, newLine._id.failure_count]]

【讨论】：

您想更详细地解释一下吗...：S 我是这个领域的新手，抱歉：S @kissu
稍加修改。解决了非常感谢@kissu