vue $set的用法

<template>
	<div class="list">
		<table>
			<tr v-for="item in orderList">
				<td :class="{active:item.checked}">
					<span >{{item.id}}</span>
					<span>{{item.name}}</span>
					<button @click="selectHandle($index)">点击</button>
				</td>
			</tr>
		</table>
	</div>
</template>
<script>
	export default{
	   route:{
        data (transition){
            let query = transition.to.query,tab = query.tab || 'all';
            console.log(query);
            console.log(transition.to.params);
         }
       },
       data(){
       	  return {
       	  	  orderList:[
 				{"id":1,"name":"hh01"},
 				{"id":2,"name":"hh02"}
       	  	  ]
       	  }
       },
       methods:{
       	  selectHandle(index){
       	  	  //下面实现方式是vue1.0 实现方式 vm.$set( keypath, value ) 这里只能接受两个参数 因此下面只能通过传递索引index来实现
//如果是vue2.0 可以传item(object) 进来  这样就方便多了  this.orderList[index] 可以换成 item就可以了  vue2.0中 vm.$set( object, key, value ) 和 vue1.0 vm.$set( keypath, value ) 不一样 
//下面vue2.0可以改成 this.$set(item,checked,true);
//vue1.0  只能通过索引  this.$set('orderList['+index+']["checked"]',true); 来实现
        this.$set('orderList['+index+']["checked"]',true);
         	 if(typeof this.orderList[index].checked == 'undefined'){
       	  	 	this.$set('orderList['+index+']["checked"]',true);
       	  	 	alert(this.orderList[index].checked)
       	  	 }else{
       	  	 	this.orderList[index].checked = !this.orderList[index].checked;
       	  	 }
             
       	  }
       },
       ready(){
       	   // var xx = this.$set('orderList[0]["checked"]',true);
       	   // console.log(this.orderList);
       }
	}
</script>
<style lang="sass">
    .list table{
    	width:100%;
    	max-width:640px;
    	margin:40px auto;
    	margin:0;
    	padding:0;
    	font-size:16px;
    }
	.list td,.list tr{
		border:1px solid #ccc;
	}
	.active{
		color:#f00;
	}
</style>

　　

转载于:https://www.cnblogs.com/zhujiasheng/p/6726253.html