vue.js 如何从表中返回v-select值?

hm2xizp9  于 7个月前  发布在  Vue.js
关注(0)|答案(1)|浏览(95)

我有一个表(VDataTable),对于每一行(person),都有一个v-select(action),所以我不能得到我为那个人选择的操作,因为v-select是迭代的,我不知道如何做到这一点。

<VDataTable class="table" :headers="headers" :items="dataRef" :items-per-page="10" height="300"
          fixed-header>
          <template #item.fullName="{ item }">
            <div class="d-flex align-center">
              <div class="d-flex flex-column ms-3">
                <span class="d-block font-weight-medium text-high-emphasis text-truncate">{{ item.name }}</span>
              </div>
            </div>
          </template>
          <template #item.action="{ item }">
            <!-- <AppSelect :items="actionOptions" placeholder="Action" v-model="item.selectedAction" :key="item.id" /> -->
            <v-select clearable :items="actionOptions" v-model="item.selectedAction"></v-select>
          </template>
        </VDataTable>

字符串
这里有一个AI答案:

watch(dataRef.value.participants, (newParticipants, oldParticipants) => {
        newParticipants.forEach((newParticipant, index) => {
            const oldParticipant = oldParticipants[index];
            if (newParticipant.selectedAction !== oldParticipant.selectedAction) {
                console.log(`Participant ${newParticipant.name} selected ${newParticipant.selectedAction}`);
            }
        });
    }, { deep: true });


这里是数据

{
    "title": "FitPal",
    "description": "FitPal is a cutting-edge mobile application designed to revolutionize your fitness journey. Whether you're a seasoned fitness enthusiast or just starting, FitPal is your ultimate companion for achieving your health and wellness goals.",
    "point": 10,
    "starting_date": "2023-10-10",
    "ending_date": "2023-12-10",
    "remain": 10,
    "participants": [
        {"id": 0, "name": "John Doe", "email": "[email protected]", "joinTime": "2023-11-13", "selectedAction": "waiting" },
        {"id": 1, "name": "Jane Smith", "email": "[email protected]", "joinTime": "2023-11-13", "selectedAction": "waiting" },
        {"id": 2, "name": "Bob Johnson", "email": "[email protected]", "joinTime": "2023-11-13", "selectedAction": "waiting" },
        {"id": 3, "name": "Alice White", "email": "[email protected]", "joinTime": "2023-11-13", "selectedAction": "waiting" },
        {"id": 4, "name": "Eve Black", "email": "[email protected]", "joinTime": "2023-11-13", "selectedAction": "waiting" },
        {"id": 5, "name": "John Doe", "email": "[email protected]", "joinTime": "2023-11-13", "selectedAction": "waiting" },
        {"id": 6, "name": "Jane Smith", "email": "[email protected]", "joinTime": "2023-11-13", "selectedAction": "waiting" },
        {"id": 7, "name": "Bob Johnson", "email": "[email protected]", "joinTime": "2023-11-13", "selectedAction": "waiting" },
        {"id": 8, "name": "Alice White", "email": "[email protected]", "joinTime": "2023-11-13", "selectedAction": "waiting" },
        {"id": 9, "name": "Eve Black", "email": "[email protected]", "joinTime": "2023-11-13", "selectedAction": "waiting" }
    ]
}


这就是

const actionOptions = ["Waiting", "Testing", "Done"];

1dkrff03

1dkrff031#

在VSelect上设置一个@input处理程序,它在每次选择操作时运行。您可以将person作为参数传递沿着:

<template #item.action="{ item }">
  <v-select
    clearable
    :items="actionOptions"
    v-model="item.selectedAction"
    @input="action => onSelect(item, action)"
  ></v-select>
</template>

字符串

相关问题