Vuetify：数据表槽值切换另一个槽值答案

【问题标题】：Vuetify: Data table slot value to toggle another slot valueVuetify：数据表槽值切换另一个槽值
【发布时间】：2020-10-01 19:40:51
【问题描述】：

我正在使用 Vuetify 数据表，并且我在其中两列上使用 v-slot:item 来插入 switches。

<v-data-table
  :headers="headers"
  :items="records"
  :search="search"
  :items-per-page="5"
>
  <template v-slot:item.monitor="{ item }">
    <v-switch v-model="item.monitor" color="success"></v-switch>
  </template>
  <template v-slot:item.manage="{ item }">
    <v-switch v-model="item.manage" color="success"></v-switch>
  </template>
</v-data-table>

我想要做的是将开关设置为 Item Group 以便一次只能选择一个（打开），但两者都可以是 false（关闭）。所以只有一个可以有真正的价值。

我曾尝试使用 Item Group component 和 got that to work，但我不确定是否可以按照我想要的方式在表格中使用，因为这两个开关位于不同的插槽中。我的印象是 v-item 应该是兄弟组件，所以这让我认为这不适用于这种情况。

【问题讨论】：

您将无法将v-item-group 与表格行一起使用 - 浏览器将忽略 TR 标记内除 TD 之外的任何内容，以及 TBODY 标记内除 TR 之外的任何内容。您有 2 个选项：(a) 将同一行上所有开关的 v-model 设置为一个数组，然后使用一个观察器，如果数组中有超过 1 个元素，则该观察器将取消这些数组中的值； (b) 在每个开关上设置一个@change 处理程序，并取消选中同一行上的所有其他开关。

标签： vue.js vuex vuetify.js

【解决方案1】：

在我看来，这个问题有两种不同的方法。您可以：

观察records 数组以检测其中一个对象的monitor 或manage 属性的变化。
不要在开关上使用v-model 指令，而是提供只读值，然后在点击时手动更改。

我更喜欢第二种选择。你可以这样做：

模板部分

<div id="app">
  <v-app id="inspire">
    <v-data-table :headers="headers" :items="records">
      <template v-slot:item.monitor="{ item }">
        <v-switch
          :input-value="item.monitor"
          readonly
          color="success"
          @click.stop="setSwitchesForItem(item.id, 'monitor', !item.monitor)"
        />
      </template>
      <template v-slot:item.manage="{ item }">
        <v-switch
          :input-value="item.manage"
          readonly
          color="success"
          @click.stop="setSwitchesForItem(item.id, 'manage', !item.manage)"
        />
      </template>
    </v-data-table>
  </v-app>
</div>

这里有几点需要注意：

v-model 已替换为 :input-value
只读道具已设置
点击事件调用自定义方法。它需要.stop 后缀，因为记录了here 的错误

脚本部分

export default {
  // ...
  data() {
    return {
      headers: [
        { text: "Name", value: "name" },
        { text: "Monitor", value: "monitor" },
        { text: "Manage", value: "manage" }
      ],
      records: [
        {
          id: 1,
          name: "Item 1",
          monitor: true,
          manage: false
        },
        {
          id: 2,
          name: "Item 2",
          monitor: false,
          manage: true
        },
        {
          id: 3,
          name: "Item 3",
          monitor: false,
          manage: false
        }
      ]
    };
  },
  methods: {
    setSwitchesForItem(itemId, attributeName, attributeValue) {
      const record = this.records.find(r => r.id === itemId);
      // In case the new value is true, we need to make sure the other one is set to false
      if (attributeValue) {
        record[attributeName === "monitor" ? "manage" : "monitor"] = false;
      }
      record[attributeName] = attributeValue;
    }
  }
}

链接到Codepen。

【讨论】：