動態新增資料with連動下拉選單(vue.js)

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">
    <h3>動態新增資料with連動下拉選單(vue.js)</h3>
    <h5>(註：[新增]=新增一筆資料列，[刪除]=刪除最尾資料列)</h5>
    <br/>
    <button type="button" v-on:click="addrow">增加</button>
    <button type="button" v-on:click="delrow">減少</button><br/><br/>
    <!--{{attrlist}}<br/>-->
    <div v-for="(inforow,infoindex) in attrlist">
      <select v-model="inforow.selectedClass" 
          v-on:change="changeClass($event,infoindex)">
      <option v-for="(row,index) in classlist" 
              v-bind:value="row.id">
        {{row.name}}
      </option>
    </select>
    
    <select v-model="inforow.selectedCode">
      <option v-for="(row,index) in inforow.dataCode" 
          v-bind:value="row.id">
        {{row.name}}
      </option>
    </select>    
    </div>          
  </div>

JavaScript

//選單1
var countylist = [
	{"id":"A", "name":"台北市"},
  {"id":"B", "name":"桃園市"},
  {"id":"C", "name":"新北市"}
];
//連動選單
var zonelist = [
	{"id":"001","name":"松山區","cat":"A"},
	{"id":"002","name":"中山區","cat":"A"},
  {"id":"003","name":"中正區","cat":"A"},
	{"id":"004","name":"中壢市","cat":"B"},
  {"id":"005","name":"平鎮區","cat":"B"},
  {"id":"006","name":"大溪鎮","cat":"B"},
  {"id":"007","name":"深坑區","cat":"C"},
  {"id":"008","name":"烏來區","cat":"C"},
  {"id":"009","name":"平溪區","cat":"C"}	
];

var vapp = new Vue({
	el:'#app',
  data:{  	
  	attrlist:[],	//資料清單
  	classlist: [],	//選單1資料        
    optiondefault:[{"id":"","name":"請選擇"}],	//預設資料
    attrInput:{	//資料列內容
    	"rid": "",	//rowid
    	"selectedClass": "",	//選取值
      "selectedCode": "",	//選取值
      "dataCode": [{"id":"","name":"請選擇"}]	//連動清單
    },    
  },
  methods:{
  	resetinfo: function(){
    	this.attrInput.rid="";
      this.attrInput.selectedClass="";
      this.attrInput.selectedCode="";
    },
  	addrow: function(){	//新增資料
    	//add一筆資料    	            
      this.resetinfo();
      this.attrInput.rid = this.attrlist.length+1;
      //避免call by referance
      var newrow = JSON.parse(JSON.stringify(this.attrInput));
      this.attrlist.push(newrow);
    },
    delrow: function(){	//刪除資料
    	this.attrlist.splice(this.attrlist.length-1, 1);
    },
    //event.target.value 選取值.	index:選取的列數
  	changeClass: function(event,index){	      
      var selectedvalue = event.target.value;	      
            
      //fill in連動下拉選單資料
      var selectlist2 = [];
      if(selectedvalue != ""){
      	var arry = zonelist.filter(function(item){
      		return item.cat == selectedvalue;       
      	});
      	selectlist2 = JSON.parse(JSON.stringify(this.optiondefault));
      	for(var i =0;i<arry.length;i++){
      		selectlist2.push(arry[i]);      
      	}      
      }else{
      	selectlist2 = JSON.parse(JSON.stringify(this.optiondefault)); 
      }
           
      this.attrlist[index].dataCode = selectlist2;
   ...