Question

我有酒店列表的数据，我需要创建包含两列的表：第一列中的其他主机列表，第二列中的酒店列表。我可以通过参数-client_listing（0或1）进行检查。

但是，如果我使用的是v-如果它不创建第二列，则将其速写并将我的酒店放置在第一列（右列）中-所有列表都放在一列中。

我想要什么：

我得到的是：

我的代码：

<div class="date-card col-md-6" v-for="dateCard in calendarResults.calendar_results" style="margin-bottom: 50px">
  <div class="date-card-header"><h3>{{dateCard.checkin.$date | moment("MM/DD/YYYY (dddd)")}}</h3></div>

  <div class="date-card-body">
    <table class="table table-bordered b-t">
      <thead>
        <tr>
          <th>Others</th>
          <th>My</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="result in dateCard.results">
          <td style="width: 50%" v-if="result.client_listing === 0">Others</td>
          <td style="width: 50%" v-if="result.client_listing === 1">My</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

我做错了什么？如何取得成果？

Answer 1

全部归为一列的原因是您的代码在每个循环中都创建了一个td元素。但是，另一方面，如果用一个空白制作2个td元素，则表中最终会出现小“孔”。这是计算方法的解决方法。

var app = new Vue({
  el: '#app',
  data: {
    dateCard : {
      results : [
        {client_listing : 0, price: 23},
        {client_listing : 1, price: 32},
        {client_listing : 0, price: 51},
        {client_listing : 0, price: 62},
        {client_listing : 1, price: 73}
      ]
    }
  },
  computed: { 
    sortListings(){
      let listingOne = this.dateCard.results.filter(result=>result.client_listing === 0)
      let listingTwo = this.dateCard.results.filter(result=>result.client_listing === 1)
      let maxLength = listingOne.length > listingTwo.length ? listingOne : listingTwo
      return { listingOne, listingTwo, maxLength   }
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div class="date-card-body">
  <table class="table table-bordered b-t">
    <thead>
      <tr>
        <th>Others</th>
        <th>My</th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="(result, index) in sortListings.maxLength">
        <td v-if="sortListings.listingOne[index]" style="width: 50%" >{{sortListings.listingOne[index].price}}</td>
        <td v-if="sortListings.listingTwo[index]" style="width: 50%" >{{sortListings.listingTwo[index].price}}</td>
      </tr>
    </tbody>
  </table>
</div>
</div>

Answer 2

也许不是完美的解决方案，但为我工作：

<table class="table  b-t">
  <thead>
    <tr>
      <th>Others</th>
      <th>My</th>
    </tr>
  </thead>

  <tbody>
    <tr>
      <td style="width: 50%">
        <ul>
          <template v-for="result in dateCard.results">
            <template v-if="result.client_listing === 0">
              <li>OTHER</li>
            </template>
            <template v-else="">
            </template>
          </template>
        </ul>
      </td>
      <td class="client-listing" style="width: 50%">
        <ul>
          <template v-for="result in dateCard.results">
            <template v-if="result.client_listing === 1">
              <li>MY</li>
            </template>
            <template v-else="">
            </template>
          </template>
        </ul>
      </td>
    </tr>
  </tbody>
</table>

VueJS条件排序数据到表

2 个答案: