vue实现局部刷新
情况一、 原生或jquery项目中引入vue.js时的局部刷新// html<tr v-for="(OrderItem,index) in OrderList" v-if="alive">...<td><span v-if="!OrderItem.isState" buttonCode="CONFIRM" @click="confirmBa...
·
情况一、 原生或jquery项目中引入vue.js时的局部刷新
// html
<tr v-for="(OrderItem,index) in OrderList" v-if="alive">
...
<td>
<span v-if="!OrderItem.isState" buttonCode="CONFIRM" @click="confirmBackOrder(OrderItem,index)">回单确认</span>
<span v-if="OrderItem.isState">已确认</span>
</td>
</tr>
// js
confirmBackOrder(orderItem,index){ //回单确认
var that = this;
var confirmOrderList = [{
orderId: orderItem.omOrderId,
actCode: orderItem.actCode,
orderNo: orderItem.orderNo
}];
postRequest(tmsUrl + "/save/ConfirmReceipt.json?token="+that.logininf.token+"&timeStamp="+that.logininf.timeStamp,confirmOrderList,function(data){
that.List[index].isState = 1;
that.reload();
})
},
reload(){ //实现局部刷新
var that = this;
that.alive= false;
this.$nextTick(() => {
that.alive = true;
})
}
情况二、 vue项目中的局部刷新
// 在App.vue中使用provide
<template>
<div id="app">
<div>
<router-view v-if="alive" />
</div>
</div>
</template>
<script>
export default {
name: 'App',
data() {
return {
alive: true
}
},
provide() {
return {
reload: this.reload
}
},
methods: {
reload() {
this.alive = false;
this.$nextTick(() => {
this.alive = true
})
}
}
}
</script>
// 在使用局部刷新的组件中使用inject
<script>
export default {
name: 'myComponent',
data () {
return {}
},
inject: ['reload'], //注入
methods: {
confirmBackOrder(){
// ...
this.reload();
}
}
}
</script>
更多推荐
已为社区贡献3条内容
所有评论(0)