vue component-inline template實驗

by cactus77kiki

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
<div id="app">
<inline-template-component inline-template
  totalpage = 15
  ref="attcontainer"
>
    <div>
      {{content}}
      <button @click="clickBtn">alert</button>
      <button v-on:click="getSelected">GetPage</button>
      <button v-on:click="addRows">AddRow</button>
      <select v-model="selected">
        <option v-for="n in Number(totalpage)">{{n}}</option>
      </select>
      <br/>
      <ul >
        <li v-for="(row,index) in data">
          <input type="text" v-model="row.id"><br/>
          <input type="text" v-model="row.name"><br/>
          <input type="text" v-model="row.score"><br/>
          <input type="text" v-model="row.remark">
        </li>
      </ul>
    </div>
  </inline-template-component>
  <br/>
  <inline-template-component inline-template
  totalpage = 17
>
    <div>
      {{content}}
      <button @click="clickBtn">alert</button>
      <button v-on:click="getSelected">GetPage</button>
      <button v-on:click="getRows">GetRows</button>
      <select v-model="selected">
        <option v-for="n in Number(totalpage)">{{n}}</option>
      </select>
    </div>
  </inline-template-component>
  <h2>Todos:</h2>
  <button type="button" v-on:click="getchildata">取得組件1動態資料</button>
  <ol>
    <li v-for="todo in todos">
      <label>
        <input type="checkbox"
          v-on:change="toggle(todo)"
          v-bind:checked="todo.done">

        <del v-if="todo.done">
          {{ todo.text }}
        </del>
        <span v-else>
          {{ todo.text }}
        </span>
      </label>
    </li>
  </ol>
</div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

del {
  color: rgba(0, 0, 0, 0.3);
}

JavaScript

/*
ref:
https://ithelp.ithome.com.tw/articles/10212067
https://forum.vuejs.org/t/passing-props-into-an-inline-template/22262/3
https://learnku.com/articles/4382/seven-ways-to-define-a-component-template-by-vuejs
*/
Vue.component('inline-template-component', {
  props:['totalpage','dataVal'],
  data: function() {
    return {
      content: 'inline template content',
      selected: 1,
      cntpage: 10,
      editInput:{
      	"id": "",
        "name": "",
        "score": "",
        "remark":""
      },
      data:[]
    };
  },
  computed:{
  	rows: function(){
    	return this.totalpage * 10;    
    },
    data1: function(){
    	/*if(this.dataVal == null || this.dataVal.length == 0){
      	return [];
      }else{
      	var outerdata = JSON.parse(JSON.stringify(this.dataVal));
    		return outerdata;
      }*/
      
    }
  },  
  methods: {
    clickBtn: function() {
      //alert(`click ${this.content} button`);
      alert('click' + this.content+ 'button');
    },
    getSelected: function(){
    	alert(this.selected);
    },
    getRows: function(){
    	alert(this.rows);
    },
    addRows: function(){      	
    	var arry = JSON.parse(JSON.stringify(this.data));
      this.resetInput();
      this.editInput.id=arry.length+1;
      arry.push(this.editInput);
      this.data = arry;
    },
    resetInput: function(){
    	this.editInput.id="";
      this.editInput.name="";
      this.editInput.score="";
      this.editInput.remark="";    
    }
  }
});

var app = new Vue({
  el: "#app",
  data: {
    todos: [
      { text: "Learn JavaScript", done: false },
      { text: "Learn Vue", done: false },
      { text: "Play around in JSFiddle", done: true },
      { text: "Build something awesome", done: true }
    ]
  },
  methods: {
  	toggle: function(todo){
    	todo.done = !todo.done
    },
    getchildata: function(){
    	console.log(this.$refs.attcontainer.data);
    }
  }
})