The following code is an example of the code vue in this case only the remaining search function, particularly well adjusted according to the actual development
<template>
<div style="id="Room">
<Van-search v-model = "selectVal" placeholder = "Please enter the meeting room you want to book" @ 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"> can accommodate people {{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() {
// no entry in the case of
if (this.selectVal === "" || this.selectVal == null) {
this.meetingRoom_list = this.omeetingRoom_list;
return;
}
// (in the case of typing) Search
let list = this.omeetingRoom_list.filter(
item => item.room_name.toString().indexOf(this.selectVal) >= 0
);
this.meetingRoom_list = list;
},
}
};