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

Question

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>

score 1 · Accepted Answer · answered Jul 14 '22 at 07:25

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>

The example you show works very well, but in my case I use a table with many records and then in my data table I use a filter to find the record I want since at the beginning they only show me 5 per page, so when filtering it keeps me the Index of the table and not the original and therefore the button is not updated as it should, an example would be that in the rendered table it takes the index 0 but it should be 800, I put 800 because this index would be the one that would have to exit show all the records but since I only want the 5 per page to appear in the search, so how can fix it? — plasticheart, Jul 15 '22 at 09:13
@plasticheart Need to check. I am not exactly sure about this. — Debug Diva, Jul 15 '22 at 09:24
so that you can test yourself, for example if I want to click on the item with id 6 that would be on page 2, it is executed on the first page since it seems to take index 0 and not 5, here is the example [link](https://codepen.io/plasticheart/pen/VwXPYVM) — plasticheart, Jul 16 '22 at 02:11

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

1 Answers1