vue.js mutation example(增/刪/修)

by cactus77kiki

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>

<div id="vapp">
  <h3>Add Item</h3>
  <input type="text" v-model="nitem" style="width:100px;"/>
  <button type="button" @click="addbyset">
  add(by set)
  </button>
  <button type="button" @click="addbysplice">
  add(by splice)
  </button>
  <button type="button" @click="addbypush">
  add(by push)
  </button>
  <h3>Edit Item</h3>
    <input type="text" readonly disabled v-model="eitem.id" style="width:30px;"/>
    <input type="text" v-model="eitem.name" style="width:100px;"/>
      <button @click="updateitem">
        Update
      </button>
      <button @click="recoveritem">
        Recover
      </button>
  <br/>
  {{datalist}}
  <ul>
    <li v-for="(row,index) in datalist">
      <button @click="goedit(row)">
        Edit
      </button>
      <button @click="godelete(row)">
        Delete
      </button>
      {{row.name}}
    </li>
  </ul>
</div>

JavaScript

/*
練習vue.js(mutation & non-mutation method)
ref: https://cn.vuejs.org/v2/guide/list.html#%E5%8F%98%E5%BC%82%E6%96%B9%E6%B3%95-mutation-method (official)
ref: https://pjchender.blogspot.com/2017/05/vue-vue-reactivity.html  (tutorial)
ref: https://blog.csdn.net/xiha_zhu/article/details/80449339  (splice:add/delete/update)
*/
var app = new Vue({
	el:"#vapp",
  data:{
  	datalist:[],	//資料清單
    nitem:'',	//新增項目name
    eitem:{},	//編輯項目
  },
  computed:{
  	currentlen: function(){	//資料清單長度
    	return this.datalist.length;
    },
    currentidx: function(){	//目前資料所在位置index(edit,delete使用)
    	var erow = this.eitem;
    	var idx = 0;
    	this.datalist.filter(function(item,index){
      	if(item.id==erow.id)
        	idx = index;
      });
      return idx;
    }
  },
  methods:{
  	/*新增*/
  	addbyset: function(){
      this.$set(this.datalist, this.currentlen, {id:this.currentlen+1,name:this.nitem});
    },
    addbysplice: function(){
    	this.datalist.splice(this.currentlen,0, {id:this.currentlen+1,name:this.nitem});
    },
    addbypush: function(){
    	this.datalist.push({id:this.currentlen+1,name:this.nitem});
    },
    /*前往編輯*/
    goedit: function(param){
    	this.eitem = JSON.parse(JSON.stringify(param));
    },
    /*更新*/
    updateitem: function(){
    	this.datalist.splice(this.currentidx,1,this.eitem);
    },
    /*放棄編輯->還原*/
    recoveritem: function(){
    	/*var erow = this.eitem;
      var iobj = {};
      this.datalist.filter(function(item){
      	if(item.id==erow.id)
        	iobj = item;
      });
      this.eitem=JSON.parse(JSON.stringify(iobj));
      */
      this.eitem = JSON.parse(JSON.stringify(this.datalist[this.currentidx]));
    },
    /*刪除*/
    godelete: function(param){
    	var erow = param;
    	if(confirm("確定刪除'"+erow.name+"'?")){
      	this.eitem = JSON.parse(JSON.stringify(param));
        this.datalist.splice(this.currentidx,1);
        this.eitem = {};
      }
    },
    /*設定資料*/
    getall: function(){
    	var arry = [];
 ...