vue中computed和watch搭配使用,监听props传递的两个或多个值的变化
vue中computed和watch搭配使用,同时监听两个或多个值的变化<template><van-popup:value="show":style="{ height: '7rem' }"@click-overlay="handleCancel"class="smart-room-popup"position="bottom"round><header class
·
vue中computed和watch搭配使用,同时监听两个或多个值的变化
<template>
<van-popup
:value="show"
:style="{ height: '7rem' }"
@click-overlay="handleCancel"
class="smart-room-popup"
position="bottom"
round
>
<header class="header mt20">
<div class="h-left" @click="handleCancel">取消</div>
<div class="h-center">请选择房间号</div>
<div class="h-right" @click="initRoom" v-if="!initRoomBtn">获取可查房</div>
<div class="h-right" v-else></div>
</header>
<main class="mt30">
<div class="get-room" @click="initRoom" v-if="initRoomBtn">
<van-button
:plain="isPass"
color="#4646E6"
><span style="font-size:0.38rem">+</span> 获取可查房</van-button>
</div>
<div class="rooms-list-wrapper" v-if="checkingRoomsData.length > 0 && !initRoomBtn">
<ul class="rooms-list">
<li class="room-item" v-for="(item, idx) in checkingRoomsData" :key="idx" @click="selectedRoom(idx, item, lockRoom)" :class="{'active': selectedRoomItem.roomNo == item.roomNo || rooms[0] == item.roomNo }">
<div class="roomNoName ellipse">{{ item.roomNo }}</div>
<div class="roomNoType ellipse">{{ item.roomTypeName }}</div>
<div class="checked-flag" v-if="item.checkFlag == 1">本期已查</div>
</li>
</ul>
</div>
<div class="rooms-list-wrapper" v-if="checkingRoomsData.length == 0 && !initRoomBtn">
<div class="empty-data">
<img src="@/assets/img/no_data@2x.png" />
<span class="tip-msg">暂无相关数据</span>
</div>
</div>
<div class="start-check">
<van-button
:disabled="disabled"
color="#4646E6"
@click="startCheck"
>开始检查</van-button>
</div>
</main>
</van-popup>
</template>
<script>
import { getPmsCheckingRoomInfo, lockPMSRoom, finishPMSRoom } from '@/api/myTaskStore'
export default {
name: 'smart-room-popup',
props: {
show: {
type: Boolean,
default: false
},
rooms: {
type: Array,
default() {
return []
}
},
hotelId: {
type: String,
default: ''
},
taskType:{
type: String | Number,
default: ''
}
},
data() {
return {
roomNos: [],
disabled: true,
isPass: true,
initRoomBtn: true,
checkingRoomsData: [],
active: null,
selectedRoomItem: {},
lockRoom: false
}
},
computed: {
userAccountId() {
return this.$store.getters.userAccountID
},
roomsOrTaskType(){
if(this.rooms && this.rooms.length && this.taskType == 7){
return true
} else {
return false
}
}
},
watch:{
// rooms(newVal){
// this.roomNos = newVal.map(roomNo => ({ val: roomNo }))
// if(this.roomNos.length){
// this.initRoom()
// this.disabled = true
// this.lockRoom = true
// }
// },
roomsOrTaskType(newVal){
// console.log(newVal);
if(newVal){
this.roomNos = this.rooms.map(roomNo => ({ val: roomNo }))
if(this.roomNos.length){
this.disabled = true
this.lockRoom = true
this.initRoom()
}
}
}
},
created() {
// this.roomNos = this.rooms.concat(new Array(5 - this.rooms.length).fill('')).map(roomNo => ({ val: roomNo }))
},
methods: {
// 智慧客房的门店自查,查询房间号
async initRoom(){
try {
let parms = {
chainCode: this.hotelId
}
$loading.show()
let res = await getPmsCheckingRoomInfo(parms)
$loading.hide()
if(res.code === 0){
this.$toast('获取房间号成功')
this.checkingRoomsData = (res.item && res.item.checkingData) || []
this.initRoomBtn = false
} else {
this.$toast(res.message)
this.initRoomBtn = true
}
} catch (error) {
$loading.hide()
this.initRoom = false
console.log(error);
this.$toast('接口异常,请重试')
}
},
selectedRoom(val, item, flag){
if(!flag){
this.active = val
this.disabled = false
this.selectedRoomItem = item
}
},
// // 解锁房间
// async finishPMSRoom(){
// try {
// } catch (error) {
// console.log(error);
// }
// },
// 开始检查
async startCheck(){
if(!this.disabled){
$loading.show()
try {
let data = {
chainCode: this.hotelId,
roomNo: this.selectedRoomItem.roomNo,
userAccountId: this.userAccountId,
}
// 锁房间
let res = await lockPMSRoom(data)
$loading.hide()
if(res.code == 0){
this.$emit('handleConfirm', [this.selectedRoomItem.roomNo])
this.disabled = true
this.lockRoom = true
// 关闭弹框
this.handleCancel()
} else {
this.$toast(res.message)
}
} catch (error) {
$loading.hide()
console.log(error);
this.$toast('接口异常,请重试')
}
} else {
}
},
handleCancel() {
this.$emit('update:show', false)
},
}
</script>
具体使用如上代码,通过props获取到父组件传递的值,然后在通过计算属性computed转换一下,这时候用watch监听computed的那个值就可以!自行尝试下吧。
更多推荐
已为社区贡献21条内容
所有评论(0)