Vuetify3中如何同时获取v-select选中值与当前行id？

你需要通过箭头函数传递额外参数，因为@update:modelValue事件默认只会传入新的选中值，我们可以直接在箭头函数里捕获这个值，再加上当前行的payout.id。

修改后的代码示例： #

<tr v-for="payout in payouts" :key="payout.id">
  <td>{{ payout.username }}</td>
  <td>
    <v-select
      v-model="payout.status"
      @update:modelValue="(newValue) => changeStatus(newValue, payout.id)"
      :items="['On', 'Off']"
    >
    </v-select>
  </td>
</tr>

对应的事件函数写法（以<script setup>为例）： #

const changeStatus = (newStatus, payoutId) => {
  // 这里可同时获取新选中状态和当前行ID
  console.log('选中状态:', newStatus, '行ID:', payoutId);
  // 执行你的业务逻辑，比如根据ID更新数据等
};

为什么之前的写法无效？ #

你之前写的@update:modelValue="changeStatus(item, payout.id)"里的item不是@update:modelValue事件的默认参数，该事件触发时只会传递新的模型值，必须用箭头函数捕获这个值后，再手动传入行ID参数。

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