vue异步的问题

• Z时代
• 2024-02-23
• 分类：IT

export default {
  data() {
    return {
      currentHotData: [],
      arr:[]
    };
  },
  methods: {
    async getCurrentHotData() {
      const res = await this.$http.get("getCurrentHotData");
      for (let item of res.data) {
        if (!item.count) {
          item.count = "可能为微博广告";
        }
        if (item.count == 0) {
          item.count = "微博置顶热搜";
        }
      }
      this.currentHotData = res.data;
      this.currentHotData.map((el) => {
        let newarr = [];
        for (let item in el) {
          newarr.push(el[item]);
        }
        this.arr.push(newarr)
        return 0;
      });
      console.log(this.arr);//(52) [Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), __ob__: Observer]
    },
    drawChart() {
      console.log(this.arr);//[__ob__: Observer]
0: (4) ["https://s.weibo.com/weibo?q=%23%E4%B8%AD%E5%9B%BD%…%87%E6%8F%90%E5%8D%874%E5%80%8D%23&Refer=new_time", "中国科学家将量子通信速率提升4倍", "0", "微博置顶热搜", __ob__: Observer]
1: (4) ["https://s.weibo.com/weibo?q=%E8%AD%A6%E6%96%B9%E9%…%90%E9%AB%98%E5%9D%A0%E8%BA%AB%E4%BA%A1&Refer=top", "警方通报武汉女子高坠身亡", "1", "1192596", __ob__: Observer]
2: (4) ["https://s.weibo.com/weibo?q=%236%E7%B1%BB%E4%BA%BA…%E8%9A%8A%E5%AD%90%E5%81%8F%E7%88%B1%23&Refer=top", "6类人最受蚊子偏爱", "2", "382993", __ob__: Observer]
3: (4) ["https://s.weibo.com/weibo?q=%23%E5%BC%A0%E5%93%B2%…%E4%BD%B3%E7%90%A6%E9%87%91%E9%9D%96%23&Refer=top", "张哲瀚也在嗑李佳琦金靖", "3", "379653", __ob__: Observer]
4: (4) ["https://s.weibo.com/weibo?q=%23%E6%8A%8A%E7%94%B7%…%E7%A5%96%E5%AD%99%E4%B8%89%E4%BB%A3%23&Refer=top", "把男朋友熬成了祖孙三代", "4", "350220", __ob__: Observer]
5: (4) ["https://s.weibo.com/weibo?q=%23%E6%9D%A8%E7%B4%AB%…%E6%95%AC%E8%85%BE%E5%90%8C%E6%A1%86%23&Refer=top", "杨紫钟汉良萧敬腾同框", "5", "342438", __ob__: Observer]
6: (4) ["https://s.weibo.com/weibo?q=%23%E5%B9%BF%E5%B7%9E%…%E6%AF%92%E5%8A%9B%E6%9B%B4%E5%BC%BA%23&Refer=top"]
      let myEchart = this.$echarts.init(document.getElementById("main"));
      let option = {
        dataset: [
          {
            dimensions: ["url", "name", "rank", "count"],
            source: this.arr,
          },
          {
            transform: {
              type: "sort",
              config: { dimension: "count", order: "desc" },
            },
          },
        ],
        xAxis: {
          type: "category",
          axisLabel: { interval: 0, rotate: 30 },
        },
        yAxis: {},
        series: {
          type: "bar",
          encode: { x: "name", y: "count" },
          datasetIndex: 1,
        },
      };
      option && myEchart.setOption(option);
    },
  },
  created() {
    this.getCurrentHotData();
  },
  mounted() {
    this.drawChart();
  },
};
我想要在drawChart()中获取到数组，而不是[__ob__: Observer]

回答：

export default {
  data() {
    return {
      currentHotData: [],
      arr:[]
    };
  },
  methods: {
    async getCurrentHotData() {
      const res = await this.$http.get("getCurrentHotData");
      for (let item of res.data) {
        if (!item.count) {
          item.count = "可能为微博广告";
        }
        if (item.count == 0) {
          item.count = "微博置顶热搜";
        }
      }
      this.currentHotData = res.data;
      this.currentHotData.map((el) => {
        let newarr = [];
        for (let item in el) {
          newarr.push(el[item]);
        }
        this.arr.push(newarr)
        return 0;
      });
      this.drawChart();
      console.log(this.arr);//(52) [Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), Array(4), __ob__: Observer]
    },
    drawChart() {
      console.log(this.arr);//[__ob__: Observer]
0: (4) ["https://s.weibo.com/weibo?q=%23%E4%B8%AD%E5%9B%BD%…%87%E6%8F%90%E5%8D%874%E5%80%8D%23&Refer=new_time", "中国科学家将量子通信速率提升4倍", "0", "微博置顶热搜", __ob__: Observer]
1: (4) ["https://s.weibo.com/weibo?q=%E8%AD%A6%E6%96%B9%E9%…%90%E9%AB%98%E5%9D%A0%E8%BA%AB%E4%BA%A1&Refer=top", "警方通报武汉女子高坠身亡", "1", "1192596", __ob__: Observer]
2: (4) ["https://s.weibo.com/weibo?q=%236%E7%B1%BB%E4%BA%BA…%E8%9A%8A%E5%AD%90%E5%81%8F%E7%88%B1%23&Refer=top", "6类人最受蚊子偏爱", "2", "382993", __ob__: Observer]
3: (4) ["https://s.weibo.com/weibo?q=%23%E5%BC%A0%E5%93%B2%…%E4%BD%B3%E7%90%A6%E9%87%91%E9%9D%96%23&Refer=top", "张哲瀚也在嗑李佳琦金靖", "3", "379653", __ob__: Observer]
4: (4) ["https://s.weibo.com/weibo?q=%23%E6%8A%8A%E7%94%B7%…%E7%A5%96%E5%AD%99%E4%B8%89%E4%BB%A3%23&Refer=top", "把男朋友熬成了祖孙三代", "4", "350220", __ob__: Observer]
5: (4) ["https://s.weibo.com/weibo?q=%23%E6%9D%A8%E7%B4%AB%…%E6%95%AC%E8%85%BE%E5%90%8C%E6%A1%86%23&Refer=top", "杨紫钟汉良萧敬腾同框", "5", "342438", __ob__: Observer]
6: (4) ["https://s.weibo.com/weibo?q=%23%E5%B9%BF%E5%B7%9E%…%E6%AF%92%E5%8A%9B%E6%9B%B4%E5%BC%BA%23&Refer=top"]
      let myEchart = this.$echarts.init(document.getElementById("main"));
      let option = {
        dataset: [
          {
            dimensions: ["url", "name", "rank", "count"],
            source: this.arr,
          },
          {
            transform: {
              type: "sort",
              config: { dimension: "count", order: "desc" },
            },
          },
        ],
        xAxis: {
          type: "category",
          axisLabel: { interval: 0, rotate: 30 },
        },
        yAxis: {},
        series: {
          type: "bar",
          encode: { x: "name", y: "count" },
          datasetIndex: 1,
        },
      };
      option && myEchart.setOption(option);
    },
  },
  created() {
    this.getCurrentHotData();
  },
};

以上是 vue异步的问题 的全部内容， 来源链接： utcz.com/p/935411.html