使用酒店房间描述搜索，如果匹配则使用 vuejs / javascript [es5] 显示相应的酒店和房间答案

【问题标题】：search using hotelroomdescription and if its matching show the corresponding hotles and rooms using vuejs / javascript [es5]使用酒店房间描述搜索，如果匹配则使用 vuejs / javascript [es5] 显示相应的酒店和房间
【发布时间】：2020-05-24 17:42:52
【问题描述】：

{
  "Data": {
    "Services": [
      {
        "Description": "Test",
        "ServiceID": 147855555,
        "Hotels": [
          {
            "HotelId": "3969f33bc946",
            "HotelName": "Crackle",
            "IsSelected": true,
            "rooms": [
              {
                "RoomId": "0abddf051b2f",
                "HotelRoomDescription": "Room1",
                "IsSelected": false
              },
              {
                "RoomId": "7ea2a918992f",
                "HotelRoomDescription": "Room2",
                "IsSelected": false
              }
            ]
          },
          {
            "HotelId": "1c6d71b3dc8a",
            "HotelName": "Steve",
            "IsSelected": true,
            "rooms": [
              {
                "RoomId": "679c9216304f",
                "HotelRoomDescription": "Bar",
                "IsSelected": false
              },
              {
                "RoomId": "b71e7f62c0e9",
                "HotelRoomDescription": "Station",
                "IsSelected": false
              },
              {
                "RoomId": "848abbb3bce7",
                "HotelRoomDescription": "Room 1",
                "IsSelected": false
              },
              {
                "RoomId": "270c22b8ef9e",
                "HotelRoomDescription": "Room 2",
                "IsSelected": false
              }
            ]
          },
          {
            "HotelId": "5dfa2733f743",
            "HotelName": "Club",
            "IsSelected": false,
            "rooms": []
          }
        ]
      }
    ]
  },
  "Message": "Success",
  "Status": "Success",
  "Type": 0
}

在前端，我将细节显示为树。例如，如果我们搜索“bar”，则酒店名称“Steve”包含房间“bar”。然后需要显示对应的酒店名称和HotelRoomDescription。如果我们不搜索，它会将整个酒店名称及其对应的房间列为树状结构。

这里roomSearch 是 v-model，无论我们输入什么进行搜索，都可以通过它获取值。

if(this.roomSearch.trim() === "") return this.hotels;

var roomenames = this.hotels.filter(function(hotel){
  return hotel.HotelRoomDescription.toLowerCase().indexOf(_this.roomSearch.toLowerCase()) -1;
});
return roomenames;

里面写的代码有错误，它没有过滤HotelRoomDescription。它不会进入房间......

【问题讨论】：

标签： vue.js ecmascript-5

【解决方案1】：

您尝试过滤酒店 (hotel.HotelRoomDescription) 上的 HotelRoomDescription，但根据您的数据，“HotelRoomDescription”是“房间”属性。

在您的过滤器函数中，您需要在 hotel.rooms 上再次循环。
这是一个可行的示例（使用简化的数据，肯定需要改进）：

new Vue({
  el: "#app",
  data () {
    return {
      hotels: [
        {
          "HotelName": "Crackle",
          "rooms": [
            { "HotelRoomDescription": "Room1" },
            { "HotelRoomDescription": "Room2" }
          ]
        },
        {
          "HotelName": "Steve",
          "rooms": [
            { "HotelRoomDescription": "Bar" },
            { "HotelRoomDescription": "Station" },
            { "HotelRoomDescription": "Room 1" },
            { "HotelRoomDescription": "Room 2" }
          ]
        },
        {
          "HotelName": "Club",
          "rooms": []
        }
      ],
      roomSearch: ''
    }
  },
  computed: {
    filteredHotels () {
      var self = this
      if (this.roomSearch.trim() === '') return this.hotels
      return this.hotels.filter(function(h) {
      	return h.rooms.some(function(r) {
          return r.HotelRoomDescription.toLowerCase().includes(self.roomSearch.toLowerCase())
        })
      })
    }
  },
  methods: {
    filteredRooms(rooms) {
      var self = this
      if (this.roomSearch.trim() === '') return rooms
      return rooms.filter(function(r) {
      	return r.HotelRoomDescription.toLowerCase().includes(self.roomSearch.toLowerCase())
      })
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input type="text" v-model="roomSearch">
  <ol>
    <li v-for="hotel in filteredHotels">
    <h4>{{ hotel.HotelName }}</h4>
      <ul>
        <li v-for="room in filteredRooms(hotel.rooms)">
          {{ room.HotelRoomDescription }}
        </li>
      </ul>
    </li>
  </ol>
</div>

【讨论】：