I need to run jq-like functions in 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'))
});
I'm stuck because I don't know how to check and add the selected attribute in vue js, nor how to get the user id and selected option when the user's selector changes.
Current code:
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> 
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
If you want to trigger some action when the option changes, then you can use a watcher to achieve this:
setup() { const options = [ ... ]; const selectedOption = Vue.ref({ ... }); Vue.watch(selectedOption, () => { // selectedOption 改变了 }); return { options, selectedOption }; }If you want to customize VSelect, like you showed in the first example, then you can replace the options component. But I believe Vuetify already handles the active state, so there's no need to modify it unless you need a specific design.
<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>