用axios显示json的结果

时间:2018-02-15 08:15:45

标签: javascript json laravel vue.js axios

您好我尝试用vue.js显示json文件结果,目标是结果将显示在值上。

这是我的代码:

    data () {
            axios.get('http://localhost:3000/statcard').then(response => {
            this.items = response.data;
            this.items.forEach(item => {
            this.statsCards.push({ type: 'warning', icon: 'ti-server', title: 'Cases', value: item, footerText: 'Updated now', footerIcon: 'ti-reload' } );
            })
          })  

          return {

            statsCards: [
              {
                type: 'warning',
                icon: 'ti-briefcase',
                title: 'Cases',
                value:  total_orders,
                Time1: '08:00',
                valuenow: '250',
                textValueNow: 'Now',
                footerText: 'Updated now',
                footerIcon: 'ti-reload'
              },
]

这是我的json文件的结果:

{"total_orders":389,"total_cases":1188,"total_cases_08":[{"numbers":"389","type":"orders","cron":"2018-02-15 08:00:19"}],"total_orders_08":[{"numbers":"1191","type":"Cases","cron":"2018-02-15 08:00:18"}]}

我正试图在stascards上显示 total_orders":389

谢谢你的帮助

1 个答案:

答案 0 :(得分:0)

如果我理解正确,这样做应该有效:

new Vue({
  el: "#app",

  data() {
      statsCards: []
  },
  mounted() {
    axios.get("http://localhost:3000/statcard").then(response => {
      this.statsCards.push({
        type: "warning",
        icon: "ti-server",
        title: "Cases",
        value: response.data.total_orders,
        footerText: "Updated now",
        footerIcon: "ti-reload"
      });
    });
  }
});