vue.jsvuejs2vuetify.jsv-data-tablev-btn

What can I do to replace a button in place of another in vuetify?

I need replace a button when it's clicked because I need that button to have 3 states (entrada, salida and registrado),I already have those buttons but they only work when reloading the page, I just want it to render without reload, I add my code for a better explanation

vuetify-data-table

<td>
    <v-btn color="success" v-if="item.check_in == null && item.check_out == null"
        v-on:click="entrada(item)">
        Entrada</v-btn>
    <v-btn color="error" v-else-if="item.check_out == null && item.check_in !== null"
        v-on:click="salida(item)">
        Salida</v-btn>

    <v-btn v-else disabled>Registrado</v-btn>
</td>

image example

Solution

  • You can play out with the buttons with in the <v-data-table> without any page refresh.

    Live Demo :

    new Vue({
  el: '#app',
  data () {
    return {
      headers: [
        {
          text: 'Check-In',
          value: 'checkin'
        },
        { text: 'Check-Out', value: 'checkout' },
        { text: 'Actions', value: 'action' }
      ],
      details: [
        {
          checkin: null,
          checkout: null,
          action: null
        },
        {
          checkin: 1,
          checkout: null,
          action: null
        },
        {
          checkin: 1,
          checkout: 3,
          action: null
        }
      ]
    }
  },
  methods: {
    entrada(index) {
      this.details.forEach((obj, i) => {
        if (i === index) {
          obj.checkin = 2
        }
      })
    },
    salida(index) {
      this.details.forEach((obj, i) => {
        if (i === index) {
          obj.checkin = null,
          obj.checkout = null  
        }
      })
    }
  }
})
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@1.5.7/dist/vuetify.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vuetify@1.5.7/dist/vuetify.min.css"/>
<div id="app">
  <v-app id="inspire">
    <div>
      <v-data-table
                    :headers="headers"
                    :items="details"
                    class="elevation-1"
                    >
        <template v-slot:items="{item, index}">
          <td>{{ item.checkin }}</td>
          <td>{{ item.checkout }}</td>
          <td>
            <v-btn color="success" v-if="item.checkin == null && item.checkout == null"
                   v-on:click="entrada(index)">
              Entrada</v-btn>
            <v-btn color="error" v-else-if="item.checkout == null && item.checkin !== null"
                   v-on:click="salida(index)">
              Salida</v-btn>
            <v-btn v-else disabled>Registrado</v-btn>
          </td>
        </template>
      </v-data-table>
    </div>
  </v-app>
</div>