如何在vue js html中以相反的顺序显示json数据？

Question

我的json数据顺序如下

{"data": {"pid": 50,  , "location": {"lat": 10.0520222278408, "lon": 76.5247535705566, "state": "Kerala", "country": "India"}, "package": 0, "contact": {"email": "4u@gmail.com", "phone": 85472, "address": {"country": "India"}}, "about": "sadfbgmjhmhhgr", "reviews": [], "wrk_hours": [{"opens_at": "08:00:00", "closes_at": "20:00:00", "day": "Saturday"}, {"opens_at": "08:00:00", "closes_at": "20:00:00", "day": "Friday"}, {"opens_at": "08:00:00", "closes_at": "20:00:00", "day": "Thursday"}, {"opens_at": "08:00:00", "closes_at": "20:00:00", "day": "Wednesday"}, {"opens_at": "08:00:00", "closes_at": "20:00:00", "day": "Tuesday"}, {"opens_at": "08:00:00", "closes_at": "20:00:00", "day": "Monday"}], }, "status": true}

我需要将 wrk _hours 显示为表格格式。我正在使用以下代码来显示相同​​的

<table bgcolor="#00FF00" width="100%" border="0" cellspacing="0" cellpadding="0" class="table table-hover table-bordered">
  <thead>
    <tr bgcolor="#577c14">
      <th v-for="(item,key) in data.wrk_hours" :key="key">
        <span v-if="new Date().getDay()-1==key" class="today">{{item.day}}</span>
        <span v-else-if="new Date().getDay()==key" class="tomorrow">{{item.day}}</span>
        <span v-else class="all">{{item.day}}</span>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td v-for="(item,key) in data.wrk_hours" :key="key">
         <span v-if="new Date().getDay()-1==key" class="today">{{item.opens_at}} to {{item.closes_at}}</span>
        <span v-else-if="new Date().getDay()==key" class="tomorrow">{{item.opens_at}} to {{item.closes_at}}</span>
        <span v-else >{{item.opens_at}} to {{item.closes_at}}</span>
    </td>
    </tr>
         </tbody>
                </table>

我的vue js代码是

new Vue({ 
 el: '#feed' , 
 data: { 
 data: [], 
 }, 
 mounted() { 

this.$nextTick(function() {    
 $.ajax({ 
 url: "http://127.0.0.1:8000/alpha/get/post/", 
 data: {
        pid: pid,
        },
 type: "POST",
 dataType: 'json', 
 success: function (e) { 
 if (e.status == 1) { 
  self.data = e.data;

 } 
 else 
 { 
 console.log('Error occurred');} 
 }, error: function(){ 
 console.log('Error occurred'); 
 } 
 }); 


 }) 
 }, 
 }) 

但是当我按照以下方式进行时，第一个星期六即将到来，然后是星期五，依此类推。我怎样才能从星期一、星期二等开始显示。请帮我按以下格式显示？

json 数据中也不存在星期日。我需要在表格中有星期天并打印为关闭？请帮我解决一下

Answer 1

试试这个

   let result = {"data": {"pid": 50,  , "location": {"lat": 10.0520222278408, "lon": 76.5247535705566, "state": "Kerala", "country": "India"}, "package": 0, "contact": {"email": "4u@gmail.com", "phone": 85472, "address": {"country": "India"}}, "about": "sadfbgmjhmhhgr", "reviews": [], "wrk_hours": [{"opens_at": "08:00:00", "closes_at": "20:00:00", "day": "Saturday"}, {"opens_at": "08:00:00", "closes_at": "20:00:00", "day": "Friday"}, {"opens_at": "08:00:00", "closes_at": "20:00:00", "day": "Thursday"}, {"opens_at": "08:00:00", "closes_at": "20:00:00", "day": "Wednesday"}, {"opens_at": "08:00:00", "closes_at": "20:00:00", "day": "Tuesday"}, {"opens_at": "08:00:00", "closes_at": "20:00:00", "day": "Monday"}], }, "status": true}

// reverse the array of work hours
result.data['wrk_hours'].reverse();

// then add the data u want for sunday

result.data['wrk_hours'].push({"opens_at": "08:00:00", "closes_at": "20:00:00", "day": "Sunday"});

那么你就可以正常执行 v-for 循环了

<table bgcolor="#00FF00" width="100%" border="0" cellspacing="0" cellpadding="0" class="table table-hover table-bordered">
  <thead>
    <tr bgcolor="#577c14">
      <th v-for="(item,key) in data.wrk_hours" :key="key">
        <span v-if="new Date().getDay()-1==key" class="today">{{item.day}}</span>
        <span v-else-if="new Date().getDay()==key" class="tomorrow">{{item.day}}</span>
        <span v-else class="all">{{item.day}}</span>
      </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td v-for="(item,key) in data.wrk_hours" :key="key">
         <span v-if="new Date().getDay()-1==key" class="today">{{item.opens_at}} to {{item.closes_at}}</span>
        <span v-else-if="new Date().getDay()==key" class="tomorrow">{{item.opens_at}} to {{item.closes_at}}</span>
        <span v-else >{{item.opens_at}} to {{item.closes_at}}</span>
    </td>
    </tr>
         </tbody>
                </table>

希望对你有帮助:)