Блог

Главная - Вопросы по программированию - таблица обратной итерации (vue)

таблица обратной итерации (vue)

#html #vue.js

#HTML #vue.js

Вопрос:

я немного новичок во всем этом, но я пытался использовать slice().reverse() в vue, но безуспешно, как я пытался. Я пытаюсь изменить порядок этой таблицы.

                 <div v-if="page == 'Calls'" >
                <h2 class="page-title">CALL MONITOR</h2>
                <h4 v-if="Object.keys(calls).length == 0" style="text-align: center; font-size: 20px; font-weight: bold; margin-top: 20px;">No incoming calls.</h4>
                <div style="margin: 0 auto; width: 100%; max-height: 90%; overflow-y: auto; margin-top: 20px;" v-if="Object.keys(calls).length > 0">
                    <table style="margin: 0 auto; width: 95%;">
                        <tr>
                            <th>#</th>
                            <th>Caller</th>
                            <th>Details</th>
                            <th>Date</th>
                            <th>Location</th>
                            <th>No. Attached</th>
                            <th>Actions</th>
                        </tr>
                        <tr v-for="(call, index) in calls" :key="index">
                            <td>{{index}}</td>
                            <td>{{call.source}}</td>
                            <td class="ellipsis"><span>{{call.details}}</span></td>
                            <td>{{call.time}}</td>
                            <td>{{call.location}}</td>
                            <td>{{attached(index)}}</td>
                            <td>
                                <i style="font-size: 1.5em;" class="fas fa-link" v-bind:class="getClass('clickable2')" v-if="current_call.id == null" v-on:click="AttachToCall(index)"></i>
                                <i style="font-size: 1.5em;" class="fas fa-unlink" v-bind:class="getClass('clickable2')" v-if="current_call.id == call.id" v-on:click="DetachFromCall(index)"></i>
                                <i style="font-size: 1.5em;" class="fas fa-map-marker-alt" v-bind:class="getClass('clickable2')" v-on:click="SetCallWaypoint(index)"></i>
                                <i style="font-size: 1.5em;" class="fas fa-info-circle" v-bind:class="getClass('clickable2')" v-on:click="ShowCallDetails(index)"></i>
                                <i style="font-size: 1.5em;" class="fas fa-edit" v-bind:class="getClass('clickable2')" v-if="current_call.id == call.id" v-on:click="EditCall(index)"></i>
                                <i style="font-size: 1.5em;" class="fas fa-trash" v-bind:class="getClass('clickable2')" v-on:click="DeleteCall(index)"></i>
                            </td>
                        </tr>
                    </table>
                </div>

Комментарии:

1. Покажите, где вы выполняете slice().reverse()

2. Я делал это здесь <tr v-for=»(вызов, индекс) в calls.slice().reverse()» :key=»index»>

3. У вас есть Object.keys(вызовы), что означает, что вызовы являются объектом, ниже нескольких строк вызовы обрабатываются как массив: v-for=»(вызов, индекс) в вызовах». Итак, какой тип на самом деле является вызовами?

4. Я считаю, что это объект

5. Покажите мне структуру вызовов