<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <h2>這裡是Boor</h2>

    <component v-bind:my-data="items" v-bind:is="currentView">
      <!-- 元件在 vm.currentview 變化時改變！ -->
</component>
    <a class="explain">直直</a>
    <button 
 
v-on:click="addData">點選</button>
  </div>
</template>

<script>
  //import $ from '@/assets/scripts/lib/zepto.min'
  //console.log($);
  //import Vue from 'vue'
function isEmptyObject(e) {
    var t;
for (t in e)
      return !1;
return !0
}
  function objectLength(o) {
      var len = 
 
0;
for(var p in o) {
          len++;
}
      return len;
}

  let data ={
      c_0:{c:1},
c_1:{c:2},
c_2:{c:3},
c_3:{c:4}
  };
let num = 0;
//console.log(objectLength(data));
const MyComponent = {
    //template: '<h3 v-for="item in items">{{ item.c}}</h3>',
props: ['myData'],
data(){
      return
 
{
        //items : myData
}
    },
render: function (createElement) {
        debugger;
let items = this.myData;
//items = JSON.stringify(items);
let num = objectLength(items);
if (!isEmptyObject(items)) {
        debugger;
return createElement('div', Array.apply(null, { length: num }).map(function (v,index) {
        return createElement('h3', items['c_'+index]['c'].toString())
      }))
    } else {
      return createElement('h1', '沒有資料!');
}
  }

  };
// 註冊
  //Vue.component('my-component', MyComponent);
export default {
  name: 'bar',
data () {
    return {
      msg: 'Bar',
fuck: 'Hello',
items: data,
currentView: MyComponent
}
  },
methods:{
    addData : function(){
        for(let p in data) {
            if(p == 'c_'+num) {
                data[p] = {'c': num };
} else {
                data['c'+num] = {'c': num };
}
        }
        num++;
}
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h1, h2 {
  font-weight: normal;
}

ul {
  list-style-type: none;
padding: 0;
}

li {
  display: inline-block;
margin: 0 10px;
}

a {
  color: #42b983;
}
</style>