[Vue.js] 在 ajax 上傳後取得 data 的 Object

最近在學 Vue.js，遇到一些問題解決了做點小筆記。



寫了一個 ajax 上傳的功能，上傳 csv 後會自動產生圖表，並可以藉由左邊的列表增加刪減項目，上傳 csv 的程式碼如下。

view plaincopy to clipboardprint

1. new Vue({   
2.   el: '#app',   
3.   data: {   
4.     list: [   
5.     ]   
6.   },   
7.     methods: {   
8.         uploadCsv: function(){   
9.         csv =  $("#csv_file")[0].files;   
10.         var data = new FormData();      
11.         data.append("csv_file", csv[0]);      
12.         var self = this;   
13.         $.ajax({      
14.                 url: 'upload-csv.php',      
15.                 type: 'POST',      
16.                 data: data,      
17.                 cache: false,        
18.                 processData: false, // Don't process the files      
19.                 contentType: false, // Set content type to false as jQuery will tell the server its a query string request      
20.             success: function(data, textStatus, jqXHR)      
21.             {      
22.                 $csvData=data; //return string   
23.   
24.                 d3.csv($csvData, function(data) {   
25.                     self.list=data;   
26.                     arrayLength=self.list.length;   
27.                         for($i=0;$i<arrayLength;$i++){   
28.                             self.list[$i]["color"]=color($i);   
29.                         }   
30.                     svg.remove();   
31.                     svg = d3.select("#chart").append("svg").attr("width",400).attr("height",300);   
32.   
33.                     svg.append("g").attr("id", "salesDonut");   
34.   
35.                     Donut3D.draw("salesDonut", self.list, 150, 150, 130, 100, 30, 0.4);   
36.   
37.                     var info = svg.selectAll("g.info")   
38.                               .data(self.list)   
39.                               .enter()   
40.                               .append("g")   
41.                               .attr("class", "info")   
42.                               .attr("transform", "translate(" + 300 + "," + 50 + ")");   
43.   
44.                           info.append("text")   
45.                           .attr("x", 10)   
46.                           .attr("y", function(d, i){   
47.                             return i*24;   
48.                           })   
49.                           .attr("fill", function(d, i) {   
50.                             return color(i);   
51.                           })   
52.                           .text(function(d, i) {   
53.                             return d.label+": "+d.value;   
54.                           });   
55.   
56.                 });   
57.                    
58.                 if(typeof data.error === 'undefined')      
59.                 {      
60.                     // Success so call function to process the form      
61.                 }      
62.                 else     
63.                 {      
64.                     // Handle errors here      
65.                     console.log('ERRORS: ' + data.error);      
66.                 }      
67.             },      
68.             error: function(jqXHR, textStatus, errorThrown)      
69.             {      
70.                 // Handle errors here      
71.                 console.log('ERRORS: ' + textStatus);      
72.                 // STOP LOADING SPINNER      
73.             }      
74.         });     
75.         }   
76.   }  

html 則為這樣

view plaincopy to clipboardprint

1. <div class="row" id="app">  
2.             <div class="col-md-6">  
3.                 <form class="form-inline">  
4.                     <div class="form-group">  
5.                         <label for="">上傳 csv: </label><input name="csv_file" type="file" id="csv_file">    
6.                     </div>  
7.                     <a role="button" class="btn btn-primary" id="upload_csv" v-on:click="uploadCsv">確認上傳</a>  
8.                 </form>  
9.                 <form class="form-inline">  
10.                 <div class="form-group">  
11.                          <input type="text" class="form-control" id="d_item" placeholder="項目" v-model="label">  
12.                         <div class="input-group">  
13.                              
14.                           <input type="text" class="form-control" id="d_val" placeholder="值" v-model="value" number>  
15.                           <span class="input-group-btn">  
16.                             <button class="btn btn-primary" id="add_data" type="button" v-on:click="addItem">新增</button>  
17.                           </span>  
18.                         </div><!-- /input-group -->  
19.                     </div>  
20.                 </form>  
21.                 <ul class="list-group" id="item_list" >  
22.                     <li v-for="item in list" data-item='{{ item.label }}' data-val='{{ item.value }}' class='list-group-item'>{{ item.label }}: {{ item.value }}<span v-on:click="removeItem($index)" class='badge'>x</span></li>  
23.                 </ul>  
24.                 <a role="button" class="btn btn-primary" id="btn_generate" v-on:click="generateChart()">Generate</a> <a role="button" class="btn btn-primary">Save</a>  
25.             </div><!-- col-md-6 -->  
26.             <div class="col-md-6">  
27.                 <div id="chart"></div>  
28.             </div>  
29. </div><!-- row -->