vue:測試撰寫住在tbody裡面的組件

開發中...

by cactus77kiki

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.19.0/axios.min.js"></script>
<div id="app">
<button type="button" v-on:click="getData">
Get Data
</button>
<!--it's ok-->
<!--<div>
  <att-ele v-bind:data = "datalist"></att-ele>
</div>-->
<table>
  <tbody><tr><td colspan="4">This is test</td></tr></tbody>
  <att-ele v-bind:data = "datalist"></att-ele>
</table>

</div>

JavaScript

/*
test vue component: 想要將component包在table裡面，template由tbody以v-for處理，但試不成功，
*/
Vue.component('att-ele', {
    /* prgid: 作業代碼名稱 /prgtitle: 作業名稱 /prgsubtitle: sub作業名稱 */
    props:
        ['data'],
    template:
    	//'<ul><li v-for="row in data">name:{{row.name}}  mail:{{row.email}}</li></ul>'	//ok
      //'<table><tr v-for="row in data"><td>name:{{row.name}}</td><td>mail:{{row.email}}</td></tr></table>'	//ok
      /*`<table>
      	<tbody v-for="row in data">
        	<tr>
          	<td>name</td>
            <td>{{row.name}}</td>
            <td>mail</td>
            <td>{{row.email}}</td>
          </tr>
        </tbody>
       </table>` */	//ok
       `<tbody v-for="row in data">
        	<tr>
          	<td>name</td>
            <td>{{row.name}}</td>
            <td>mail</td>
            <td>{{row.email}}</td>
          </tr>
        </tbody>`
        //'<tbody>' +
        //    '{{data}}' +
        //'</tbody>'        
});

var vueapp = new Vue({
	el:'#app',
  data:{
  	datalist:[]
  },
  methods:{
  	getData: function(){
    	var self = this;
    	var url = 'https://jsonplaceholder.typicode.com/comments';
    	axios.get(url)
  			.then(function (response) {
    			//console.log(response);
          self.datalist = response.data;
  			})
  			.catch(function (error) {
    			console.log(error);
  			});
    }  
  }
});