Here is the HTML code for my multi-select input:
<select id="invitees_list1" class="form-select" multiple name="multi">
@foreach ($seatedTable->invitees as $invitee)
<option>
{{ $invitee['name'] }}
</option>
@endforeach
</select>
And here is the Vue.js code:
<script src="{{ URL::asset('assets/admin/app-assets/js/scripts/vue2.min.js') }}"></script>
<script>
const app = new Vue({
el: '#filtersContainer',
data: {
invitees: [],
selectedInviteeIds: [],
inviteesList: [],
selectedTableInfo: null,
eventTables: [],
newTableName: "",
totalChairNumberEntered: 0,
confirmedInviteesRoute: "{{ route('invitee_tables.confirmed_invitees', $event) }}",
selectedInviteesRoute: "{{ route('invitee_tables.assignModalData', $event) }}",
assignTableRoute: "{{ route('invitee_tables.assign', $event) }}",
isDisabled: false
},
created() {
axios.get(this.confirmedInviteesRoute)
.then(({
data
}) => {
if (data?.status) {
this.invitees = data?.data || []
}
})
.catch((err) => console.log(err))
},
mounted() {
$("#name_filter").select2()
$('#side_filter').select2()
$('#caller_filter').select2()
$('#relation_filter').select2()
$('#invitees_list').select2()
$('#invitees_list1').select2()
$('#invitees_list1').show()
$("#invitees_list").show()
},
I'm looking to capture and trigger an event whenever the value of the multi-select input changes. I've attempted using JavaScript events, but it has not worked as expected.