创新实训（十五）

由于用户搜索的景点距离可能较远，此时会返回多组酒店，因此我们需要在有多组酒店返回的情况下处理界面。

我的尝试是用列表循环接收每组数据，一个li为一组，再在列表中循环添加单个酒店。尝试是成功的，但我又发现了新的问题，就是每组酒店都会返回20个结果，如果这样展示的话从第一组翻到第二组要很麻烦，因此我需要写一个能展开收起每组酒店的按钮。但由于我是使用循环绑定的数据，我不能将控制它们展开收起的判断绑在一个数据上，因此我尝试使用数据的index与当前展开的数据作比较为判断依据，一致则展开，不一致则收起。这样的结果是成功的，但是有个缺点是每次只能有一个li被展开。但是考虑到每个li过长，因此每次只有一个被展开反倒是优化了用户体验。

<ul
        class="list"
        v-if="hasHotel&!isMore"
      >
        <li
          v-for="hotel in hotels"
          :key="hotel.name"
          class="list-item"
        >
          <hotel :name="hotel.name" :webs="hotel.web" :scenics="params.scenics" :city="city" :imgsrc="hotel.picture" :scenicandaddress="scenicandaddress" :oneScenic="oneScenic" :firstScenic="firstScenic"> </hotel>
        </li>
      </ul>
      <ul
        class="list"
        v-if="hasHotel&isMore"
      >
      <span class="notion">由于您选择的景点距离较远，因此为您推荐多组酒店。</span>
        <li
          v-for="(ahotel,index) in morehotels"
          :key="index"
          class="ahotels"
           @click="openlist(index)"
        >
          <div class="nsearchResult">
        <span class="resulttitle">{{"第"+(index+1)+"组搜索结果(点击以展开/收起)"}}</span>
            </div>
          <div class="results" v-if="nowopen==index">
          <hotel v-for="hotel in ahotel" :key="hotel.index" :name="hotel.name" :webs="hotel.web" :scenics="params.scenics" :scenicandaddress="scenicandaddress" :city="city" :imgsrc="hotel.picture" :oneScenic="oneScenic" :firstScenic="firstScenic" class="hotel"> </hotel>
          <span class="notion">&nbsp;</span>
          </div>
        </li>
      </ul>

 data() {
    return {
    	selectData: "",
    },

methods:{
	openlist(index){
      if (this.nowopen==index){
        this.nowopen=-1;
      } else {
        this.nowopen=index;
      }
   	},
  }