Vuetify中如何将表格行数据传入v-dialog弹窗（WiFi编辑/删除）

核心思路是通过一个全局变量存储当前操作的WiFi项，打开弹窗时将选中的行数据赋值给这个变量，弹窗内直接绑定该变量的属性即可。以下是具体修改步骤：

1. 添加当前选中项的数据属性 #

在data中新增currentWifiItem，用于临时存储点击的WiFi条目：

data: () => ({
  showEditDialog: false,
  showDeleteDialog: false,
  currentWifiItem: null, // 新增存储当前操作项的变量
  headers: [/* 原内容保持不变 */],
  wifiNetworks: [
    // 给每个WiFi项补充password属性（用于修改密码）
    {
      SSID: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
      security: 'WEP',
      isConnected: false,
      autoConnect: true,
      password: '',
      action: 'connect',
    },
    {
      SSID: 'XYZ',
      security: 'WPA2',
      isConnected: true,
      autoConnect: true,
      password: '',
      action: 'connect',
    },
    {
      SSID: '0x1234',
      security: 'None',
      isConnected: false,
      autoConnect: false,
      password: '',
      action: 'connect',
    },
    {
      SSID: 'BGT',
      security: 'WPA',
      isConnected: false,
      autoConnect: false,
      password: '',
      action: 'connect',
    },
  ],
}),

2. 修改打开弹窗的方法 #

更新editItem和showDeleteWifiDialog方法，将点击的行数据赋值给currentWifiItem：

methods: {
  editItem(item) {
    this.currentWifiItem = item;
    this.showEditDialog = true;
  },
  showDeleteWifiDialog(item) {
    this.currentWifiItem = item;
    this.showDeleteDialog = true;
  },
  // 其余方法保持不变
},

3. 修复编辑弹窗 #

修改弹窗内容，绑定currentWifiItem的属性，实现显示WiFi名称、修改密码和自动连接状态：

<v-dialog v-model="showEditDialog" max-width="600">
  <v-card prepend-icon="mdi-wifi" :title="`Edit ${currentWifiItem?.SSID} Settings`">
    <v-card-text>
      <v-row dense>
        <v-col cols="12" md="4" sm="6">
          <v-text-field
            hint="Enter the Wifi password of your router."
            label="Wifi Password *"
            type="password"
            required
            v-model="currentWifiItem.password" // 绑定当前项的密码
          ></v-text-field>
        </v-col>

        <v-col cols="12" sm="6">
          <v-checkbox 
            label="Auto-Connect"
            v-model="currentWifiItem.autoConnect" // 绑定当前项的自动连接状态
          ></v-checkbox>
        </v-col>
      </v-row>

      <small class="text-caption text-medium-emphasis">* indicates a required field</small>
    </v-card-text>

    <v-divider></v-divider>

    <v-card-actions>
      <v-spacer></v-spacer>

      <v-btn
        text="Close"
        variant="plain"
        @click="showEditDialog = false"
      ></v-btn>

      <v-btn
        color="primary"
        text="Save"
        variant="tonal"
        @click="showEditDialog = false"
        // 此处可添加保存后的API调用或数据持久化逻辑
      ></v-btn>
    </v-card-actions>
  </v-card>
</v-dialog>

4. 修复删除弹窗 #

移除错误的v-slot:item.name（该插槽不属于v-dialog），直接使用currentWifiItem显示WiFi名称，并更新删除逻辑：

<v-dialog v-model="showDeleteDialog" max-width="500">
  <v-card title="Delete Wifi">
    <v-card-text>
      Are you sure you want to remove {{ currentWifiItem?.SSID }} from the list of known Wifis?
    </v-card-text>

    <v-card-actions>
      <v-spacer></v-spacer>

      <v-btn
        text="Cancel"
        variant="plain"
        @click="hideDeleteWifiDialog()"
      ></v-btn>

      <v-btn
        color="red"
        text="Delete Wifi"
        variant="tonal"
        prepend-icon="mdi-delete" // 修复图标错误
        @click="deleteWifi()"
      ></v-btn>
    </v-card-actions>
  </v-card>
</v-dialog>

同时更新deleteWifi方法，根据currentWifiItem删除数组中的对应项：

deleteWifi() {
  this.showDeleteDialog = false;
  // 通过SSID匹配找到项的索引并删除
  const targetIndex = this.wifiNetworks.findIndex(network => network.SSID === this.currentWifiItem.SSID);
  if (targetIndex !== -1) {
    this.wifiNetworks.splice(targetIndex, 1);
    // 此处可添加调用后端API删除的逻辑
  }
},

5. 修复连接按钮的点击事件 #

原代码中连接按钮的点击逻辑写法错误，修改为：

<v-chip
  :color="item.isConnected ? 'green' : 'black'"
  :text="item.isConnected ? 'Connected' : 'Connect'"
  :variant="item.isConnected ? 'tonal' : 'outlined'"
  @click="!item.isConnected && connect(item)" // 简化点击逻辑
  size="small"
  label
></v-chip>

修改完成后，点击编辑或删除按钮时，弹窗会正确显示对应WiFi的名称，保存/删除操作也能获取到当前操作的WiFi数据，完成后续业务逻辑。

内容的提问来源于stack exchange，提问作者Norbert