Vuejs 在单击 v-switch 或复选框时将单击的行移动到另一个 table

Question

第二行 table 上的任何行都应在单击 v-switch 时移动到第一行如果单击 v-switch，第一 table 上的任何行也应移动到第二 table。我坚持使用哪种方法。

<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>

Answer 1

请看下面的片段：

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/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/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/vue@2.x/dist/vue.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

Vuejs 在单击 v-switch 或复选框时将单击的行移动到另一个 table

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

javascript

vue.js

vuex

vuejs2

vuetify.js