Modifications du sélecteur dans Vue.js : définition des données sélectionnées pour les sélecteurs et les sélecteurs d'événements dans les boucles

Question

Je dois exécuter des fonctionnalités de type jq dans 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'))
            });

Je suis bloqué parce que je ne sais pas comment vérifier et ajouter l'attribut vérifié dans vue js ou comment obtenir l'identifiant utilisateur et l'option sélectionnée lorsque le sélecteur de l'utilisateur change.

Code actuel :

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

Si vous souhaitez déclencher une action lorsque l'option change, vous pouvez utiliser un watcher pour y parvenir :

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

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

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

    return {
        options,
        selectedOption
    };
}

Si vous souhaitez personnaliser VSelect, comme vous l'avez montré dans votre premier exemple, vous pouvez remplacer le composant options. Mais je pense que Vuetify gère déjà l'état actif, il n'est donc pas nécessaire de le modifier, sauf si vous avez besoin d'une conception spécifique.

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