以下代碼為vue中的實例代碼，此時只剩余搜索功能，具體還有根據實際開發調整
<template>
<div style="id="Room">
<van-search v-model="selectVal" placeholder="請輸入您要預訂的會議室" @input="queryData" />
<van-grid :column-num="2">
<van-grid-item
v-for="(item,index) in meetingRoom_list "
:key="index"
>
<div class="tdiv">
<div style="width: 100%; position: absolute;">
<van-image class="img" :src="item.image_path" />
</div>
</div>
<p class="p1">{{item.room_name}}</p>
<p class="p2">可容納{{item.galleryful}}人</p>
</van-grid-item>
</van-grid>
</div>
</template>
<script>
import { meetingRoomList } from "../../axios/home";
export default {
name: "meetingRoomList",
data() {
return {
meetingRoom_list: [],
omeetingRoom_list: [],
selectVal: ""
};
},
methods: {
load() {
queryData() {
//沒有輸入內容的情況下
if (this.selectVal === "" || this.selectVal == null) {
this.meetingRoom_list = this.omeetingRoom_list;
return;
}
//搜索（輸入內容的情況下）
let list = this.omeetingRoom_list.filter(
item => item.room_name.toString().indexOf(this.selectVal) >= 0
);
this.meetingRoom_list = list;
},
}
};