Vue.js中的選擇器變更：為循環中的選擇器和事件選擇器設定選定的數據

Question

我需要在vuejs中運行類似jq的功能：

- html 
             @foreach($users as $user) 
                <td>
                    <selecter class="check-change" data-id="{{$user->id}}">
                        <opt @if($user->status == 'active') selected @endif value="active">Active</opt>
                        <opt @if($user->status == 'wait_confirm') selected @endif value="wait_confirm">Wait Confirm</opt>
                    <selecter>
                </td>`
- jq 
            `$('.check-change').on('change', function() {
                var new_value = this.value;
                -> send request update user (this.attr('data-id'))
            });

我被卡住了，因為我不知道如何在vue js中檢查並添加選取的屬性，也不知道當使用者的選擇器發生變化時如何取得使用者id和選取的選項。

目前程式碼：

const items_status = [
{
    state: 'Active',
    abbr: 'active',
  },
  {
    state: 'Wait Confirm',
    abbr: 'wait_confirm',
  }
];
const selectedOption = ref({
    state: 'Wait Confirm',
    abbr: 'wait_confirm',
})
<tr
    v-for="user in users"
    :key="user.id"
    style="height: 3.75rem;"
    <td>
        <VSelect
            v-model="selectedOption"
            :hint="`${selectedOption.state}, ${selectedOption.abbr}`"
            :items="items_status"
            item-title="state"
            item-value="abbr"
            label="Select"
            persistent-hint
            return-object
            single-line
        />
    </td>
</tr>

Answer 1

如果你想在選項改變時觸發某些操作，那麼你可以使用一個 watcher 來實現：

setup() {
    const options = [ ... ];

    const selectedOption = Vue.ref({ ... });

    Vue.watch(selectedOption, () => {
        // selectedOption 改变了
    });

    return {
        options,
        selectedOption
    };
}

如果你想自訂 VSelect，就像你在第一個範例中展示的那樣，那麼你可以取代選項元件。但是我相信 Vuetify 已經處理了活動狀態，所以除非你需要特定的設計，否則不需要修改它。

<v-select v-model="selectedOption" :items="options" item-title="state" item-value="abbr" label="Select" return-object single-line>
    <template #item="{ item, props }">
        <v-list-item v-bind="{ ...props, title: undefined }">
            {{ item.value.abbr === selectedOption.abbr ? 'selected' : '' }} {{ item.title }}
        </v-list-item>
    </template>
</v-select>