Vuejs move clicked row to another table on click of v-switch or checkbox

Question

Any row on the second table should move to the first one on click of the v-switch and also any row on the first table should move to the second table if its v-switch is clicked. I am stuck on which approach to use.

<template>
  <v-simple-table>
    <template v-slot:default>
      <thead>
        <tr class="ma-0 pa-0">
          <th>Available Items</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <tr class="ma-0 pa-0">
          <td>Item-005</td>
          <td>
            <v-switch v-model="switch1" inset label="Available"></v-switch>
          </td>
        </tr>
      </tbody>
    </template>
  </v-simple-table>

  <v-simple-table>
    <template v-slot:default>
      <thead>
        <tr class="ma-0 pa-0">
          <th>UnAvailable Items</th>
          <th>Action</th>
        </tr>
      </thead>
      <p>UnAvailable Items</p>
      <tbody>
        <tr class="ma-0 pa-0">
          <td>Item-125</td>
          <td>
            <v-switch v-model="switch2" inset label="Unavailable"></v-switch>
          </td>
        </tr>
      </tbody>
    </template>
  </v-simple-table>
</template>

<script>
export default {
  data(){
    return {
      switch1: false,
      switch2: false,
    }
 }
};
</script>

Nikola Pavicevic · Accepted Answer · 2022-04-13 12:10:55Z

1

Please take a look at following snippet:

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data(){
    return {
      items: [{id: 1, name: "aaa", availabile: true}, {id: 2, name: "bbb", availabile: false}, {id: 3, name: "ccc", availabile: false}, {id: 4, name: "ddd", availabile: true}, {id: 5, name: "eee", availabile: true}]
    }
  }
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
  <div id="app">
    <v-app>
      <v-main>
        <v-container>
          <v-simple-table>
            <template v-slot:default>
              <thead>
                <tr class="ma-0 pa-0">
                  <th>Available Items</th>
                  <th>Action</th>
                </tr>
              </thead>
              <tbody>
                <tr class="ma-0 pa-0" v-for="item in items" :key="item.id">
                  <td v-if="item.availabile">{{ item.name }}</td>
                  <td v-if="item.availabile">
                    <v-switch v-model="item.availabile" inset label="Available"></v-switch>
                  </td>
                </tr>
              </tbody>
            </template>
          </v-simple-table>

          <v-simple-table>
            <template v-slot:default>
              <thead>
                <tr class="ma-0 pa-0">
                  <th>UnAvailable Items</th>
                  <th>Action</th>
                </tr>
              </thead>
              <p>UnAvailable Items</p>
              <tbody>
                <tr class="ma-0 pa-0" v-for="item in items" :key="item.id">
                  <td v-if="!item.availabile">{{ item.name }}</td>
                  <td v-if="!item.availabile">
                    <v-switch v-model="item.availabile" inset label="Unavailable"></v-switch>
                  </td>
                </tr>
              </tbody>
            </template>
          </v-simple-table>
        </v-container>
      </v-main>
    </v-app>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>

answered Apr 13, 2022 at 12:10

Nikola Pavicevic

23.6k9 gold badges30 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Josephat Macharia Over a year ago

Thanks @Nikola Pavicevic this is the expected behaviour i was looking for.

Nikola Pavicevic Over a year ago

@Josephat Macharia You are welcome mate, cheers :)

Josephat Macharia Over a year ago

I have one more question, how do i get the ids of the row items that have moved in either direction(to the available items table and unavailable items table)

Josephat Macharia Over a year ago

I want to store or keep track of the ids that have moved to either available or unavailable table so that i can persist the changes to some database

Nikola Pavicevic Over a year ago

Ahh, sorry, you can just submit whole items array and replace it in database

|

Collectives™ on Stack Overflow

Vuejs move clicked row to another table on click of v-switch or checkbox

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related