Perubahan pemilih dalam Vue.js: menetapkan data yang dipilih untuk pemilih dan pemilih acara dalam gelung

Question

Saya perlu menjalankan fungsi seperti jq dalam vuejs:

- 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'))
            });

Saya buntu kerana saya tidak tahu cara menyemak dan menambah atribut yang ditanda dalam vue js atau cara mendapatkan id pengguna dan pilihan yang dipilih apabila pemilih pengguna berubah.

Kod semasa:

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

Jika anda ingin mencetuskan beberapa tindakan apabila pilihan berubah, maka anda boleh menggunakan pemerhati untuk mencapai ini:

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

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

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

    return {
        options,
        selectedOption
    };
}

Jika anda ingin menyesuaikan VSelect, seperti yang anda tunjukkan dalam contoh pertama anda, maka anda boleh menggantikan komponen pilihan. Tetapi saya percaya Vuetify sudah mengendalikan keadaan aktif, jadi tidak perlu mengubahnya melainkan anda memerlukan reka bentuk tertentu.

<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>