menampilkan data secara desc di vue js

saya ada datatable mengunakan vuetify nah saya mau tanya bagaimana saat data masuk ke array itu pas di print data baru selalu nampil paling atas atau descending

<style media="screen">
.fade-enter-active, .fade-leave-active {
transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
opacity: 0;
}
</style>
<template>
<v-card>

  <div v-if="qrcode === true">
    <v-btn color="primary" @click="qrcode = !qrcode" depressed>Manual</v-btn>
  </div>
  <div v-else-if="manual === true">
    <v-btn color="primary" @click="qrcode = !qrcode" depressed>Qrcode</v-btn>
  </div>

    <div v-if="qrcode === true">
      <span v-on="manual = false"></span>
    </div>
    <div v-else-if="manual === true">
      <span v-on="qrcode = false"></span>
    </div>
    <div v-else-if="qrcode === false">
      <span v-on="manual = true"></span>
    </div>
    <div v-else-if="manual === false">
      <span v-on="qrcode = true"></span>
    </div>
  <v-expand-transition >
    <v-layout row wrap mx-2 my-2 v-if="qrcode">
      <v-flex xs6>
        <!-- <v-img src="https://picsum.photos/200/200?random" max-width="200" max-height="200" ></v-img> -->
        <v-alert :value="true" color="error" v-if="error != ''" > {{ error }} </v-alert>
        <p class="decode-result">Last result: <b>{{ result }}</b></p>
        <div class="" style="max-width:200px;">
        <qrcode-stream @decode="onDecode" @init="onInit" />
      </div>
    </v-flex>
    </v-layout>
  </v-expand-transition>

  <v-expand-transition>
    <v-layout row wrap mx-2 my-2 v-if="manual">
      <v-container>
      <v-flex md6>
        <v-text-field name="kode" label="Kode" v-model="result" id="kode" :value="result"></v-text-field>
      </v-flex>
      <v-flex md2>
        <v-btn color="primary" @click="pushpresensi()" depressed>Ok</v-btn>
      </v-flex>
    </v-container>
    </v-layout>
  </v-expand-transition>

  <v-data-table :headers="headers" v-bind:pagination.sync="pagination" :items="presensi"  class="elevation-1" mt-5 >
    <template slot="items"  slot-scope="props">
      <td>{{ props.item.id_peserta }}</td>
      <td>{{ props.item.nama_peserta }}</td>
      <td>{{ props.item.telepon_peserta }}</td>
      <td>{{ props.item.jam_hadir }}</td>
    </template>
  </v-data-table>

</v-card>

</template>

<script>
import Vue from 'vue';
import { QrcodeStream, QrcodeDropZone, QrcodeCapture } from 'vue-qrcode-reader'
import axios from 'axios';
  export default {
    components:{
      QrcodeStream,
      QrcodeDropZone,
      QrcodeCapture,
    },
    mounted(){
      let $vm = this
      var channel = this.$pusher.subscribe('presensi-channel');
      channel.bind('presensi-event',function(data){
        var hasil = {
          'id_peserta' : data.id_peserta,
          'jam_hadir' : data.jam_hadir,
          'message' : data.message,
          'nama_peserta' : data.nama_peserta,
          'success' : data.success,
          'telepon_peserta' : data.telepon_peserta,
        }
        console.log($vm.presensi);
        $vm.presensi.push(hasil)
      })
    },
    created:function() {
      axios.get('https://seminar.amcc.or.id/api/v1/presensi')
    .then(response => {
      // JSON responses are automatically parsed.
      this.presensi = response.data
    })
    .catch(e => {
      this.errors.push(e)
    })

    },
    methods: {
      testpush(){
        axios.post("https://seminar.amcc.or.id/api/v1/presensi",{
          kode:this.result,
          name:"rika",
          tlp:"3000000"
        }).then((response) => {
          console.log(response.data);
      })

      console.log(result);

        var channel = this.$pusher.subscribe('notif-chennel');
        channel.bind('my-event',function(data){
          console.log("test 2 "+data.kode)
          console.log("test 2 "+data.name)
          console.log("test 2 "+data.tlp)
        })
      },
      pushpresensi(){
        var audios = new Audio('https://s0.vocaroo.com/media/download_temp/Vocaroo_s0pPykpJrEbB.mp3');
        audios.play();
        var fd = new FormData();
        fd.append('id_peserta',this.result)
        axios.post("https://seminar.amcc.or.id/api/v1/presensi",fd).then((response) => {
          if (response.data.message == 'berhasil') {
          const Toast = Swal.mixin({
            toast: true,
            position: 'top-end',
            showConfirmButton: false,
            timer: 3000
          });

          Toast.fire({
            type: 'success',
            title: 'Presensi berhasil'
          })
          this.result = ""
        }else if (response.data.message == 'sudah') {
          const Toast = Swal.mixin({
            toast: true,
            position: 'top-end',
            showConfirmButton: false,
            timer: 3000
          });

          Toast.fire({
            type: 'error',
            title: 'anda sudah presensi'
          })
          this.result = ""

        }else if (response.data.message == 'tidakada') {
          const Toast = Swal.mixin({
            toast: true,
            position: 'top-end',
            showConfirmButton: false,
            timer: 3000
          });

          Toast.fire({
            type: 'error',
            title: 'Maaf anda tidak terdaftar sebagai peserta'
          })
          this.result = ""

        }
})
    },
    onDecode (result) {
      this.result = result
      this.pushpresensi()
    },
    logErrors (promise) {
    promise.catch(console.error)
  },
  // addPresensi(){
  //   axios.
  // },

  async onInit (promise) {
        try {
          await promise
        } catch (error) {
          if (error.name === 'NotAllowedError') {
            this.error = "ERROR: you need to grant camera access permisson"
          } else if (error.name === 'NotFoundError') {
            this.error = "ERROR: no camera on this device"
          } else if (error.name === 'NotSupportedError') {
            this.error = "ERROR: secure context required (HTTPS, localhost)"
          } else if (error.name === 'NotReadableError') {
            this.error = "ERROR: is the camera already in use?"
          } else if (error.name === 'OverconstrainedError') {
            this.error = "ERROR: installed cameras are not suitable"
          } else if (error.name === 'StreamApiNotSupportedError') {
            this.error = "ERROR: Stream API is not supported in this browser"
          }
        }
      }

  },
    data () {
      return {
        result: '',
        error: '',
        test:0,
        qrcode:false,
        manual:false,

        headers: [
          {text: 'Kode',sortable: false, value: 'kode'},
          { text: 'Nama', value: 'name' },
          { text: 'No Tlp', value: 'tlp' },
          { text: 'Waktu Presensi',value: 'time'},
          {'sortBy': 'time', 'descending': true}
        ],
        pagination : [
          {'sortBy': 'time', 'descending': true, 'rowsPerPage': -1}
        ],
        presensi: []
      }
    }
  }

  // setInterval(()=>{ document.getElementById('autoload').click() },10)
</script>

avatar devry
@devry

44 Kontribusi 5 Poin

Diperbarui 4 tahun yang lalu

2 Jawaban:

Jawaban Terpilih

sudah fix mengunakan fungsi unshift()

avatar devry
@devry

44 Kontribusi 5 Poin

Dipost 4 tahun yang lalu

Pake v-for di computed Ex: this.datamu.reverse()

avatar bobwatcherx
@bobwatcherx

2 Kontribusi 0 Poin

Dipost 4 tahun yang lalu

Login untuk ikut Jawaban