$.ajax() combined with vue to get data and render

html:

<div id="app1">
    <ul>
        <li v-for="item in datas">
            <div href="">
                <div v-text="item.time"></div>
                <div href="" v-for="item1 in item.list">
                    <div v-text="item1.type"></div>
                    <div v-text="item1.money"></div>
                </div>
            </div>
        </li>
    </ul>
</div>

  JS:

var vmm = new Vue (
    el: "#app1",
    data: {
        dates: []
 
    },
    mounted:function(){
        this.showData();
        //The method that needs to be executed can be triggered in mounted, and the obtained data can be assigned to the data and then rendered in front
    },
    methods:{
        showData:function () {
            jQuery.ajax({
                type: 'Get',
                url: "data-data.json",
            // data:{type:type,ext:ext},
              datatype:"json",
              success: function (data) {
                for(var i=0;i<data.length;i++){
                vmm.datas.push(data[i]);
              }
               console.log (vum.datas);
               }
           }
});

  data-data.json:

[
  {
    "time":"2017-10-10",
    "list":[
      {"type":"Consumption (Order No. 101010101010)","money":"99.00"},
      {"type":"Store Value (Order No. 101010101010)","money":"78.00"},
      {"type":"Refund (Order No. 101010101010)","money":"66.00"}
    ]
  },
  {
    "time":"2017-08-16",
    "list":[
      {"type":"Consumption (Order No. 101010101010)","money":"99.00"},
      {"type":"Store Value (Order No. 101010101010)","money":"78.00"},
      {"type":"Refund (Order No. 101010101010)","money":"66.00"}
    ]
  },
  {
    "time":"2017-07-16",
    "list":[
      {"type":"Consumption (Order No. 101010101010)","money":"99.00"},
      {"type":"Store Value (Order No. 101010101010)","money":"78.00"},
      {"type":"Refund (Order No. 101010101010)","money":"66.00"}
    ]
  }
]

  https://www.cnblogs.com/yg_zhang/p/6158612.html

 

https://blog.csdn.net/qq_39740187/article/details/77369749

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325199092&siteId=291194637