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

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 >
          <th>Available Items</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <tr >
          <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 >
          <th>UnAvailable Items</th>
          <th>Action</th>
        </tr>
      </thead>
      <p>UnAvailable Items</p>
      <tbody>
        <tr >
          <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>

CodePudding user response：

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 >
                  <th>Available Items</th>
                  <th>Action</th>
                </tr>
              </thead>
              <tbody>
                <tr  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 >
                  <th>UnAvailable Items</th>
                  <th>Action</th>
                </tr>
              </thead>
              <p>UnAvailable Items</p>
              <tbody>
                <tr  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>