Get value from v-select - vuejs3

Question

I have a dropdown component that utilized vue-select that's populating states as a dropdown. When I choose an option from the dropdown the data is not getting grabbed. Here's my dropdown component.
<template>
<div>
<label>States</label>
<v-select label="name" :options="states"></v-select>
</div>
</template>
<script>
export default {
data() {
return {
states: [
{
"name": "Alabama",
"code": "AL"
},
{
"name": "Alaska",
"code": "AK"
},
{
"name": "American Samoa",
"code": "AS"
},
{
"name": "Arizona",
"code": "AZ"
},
{
"name": "Arkansas",
"code": "AR"
},
{
"name": "California",
"code": "CA"
},
{
"name": "Colorado",
"code": "CO"
},
{
"name": "Connecticut",
"code": "CT"
},
{
"name": "Delaware",
"code": "DE"
},
{
"name": "District Of Columbia",
"code": "DC"
},
{
"name": "Federated States Of Micronesia",
"code": "FM"
},
{
"name": "Florida",
"code": "FL"
},
{
"name": "Georgia",
"code": "GA"
},
{
"name": "Guam",
"code": "GU"
},
{
"name": "Hawaii",
"code": "HI"
},
{
"name": "Idaho",
"code": "ID"
},
{
"name": "Illinois",
"code": "IL"
},
{
"name": "Indiana",
"code": "IN"
},
{
"name": "Iowa",
"code": "IA"
},
{
"name": "Kansas",
"code": "KS"
},
{
"name": "Kentucky",
"code": "KY"
},
{
"name": "Louisiana",
"code": "LA"
},
{
"name": "Maine",
"code": "ME"
},
{
"name": "Marshall Islands",
"code": "MH"
},
{
"name": "Maryland",
"code": "MD"
},
{
"name": "Massachusetts",
"code": "MA"
},
{
"name": "Michigan",
"code": "MI"
},
{
"name": "Minnesota",
"code": "MN"
},
{
"name": "Mississippi",
"code": "MS"
},
{
"name": "Missouri",
"code": "MO"
},
{
"name": "Montana",
"code": "MT"
},
{
"name": "Nebraska",
"code": "NE"
},
{
"name": "Nevada",
"code": "NV"
},
{
"name": "New Hampshire",
"code": "NH"
},
{
"name": "New Jersey",
"code": "NJ"
},
{
"name": "New Mexico",
"code": "NM"
},
{
"name": "New York",
"code": "NY"
},
{
"name": "North Carolina",
"code": "NC"
},
{
"name": "North Dakota",
"code": "ND"
},
{
"name": "Northern Mariana Islands",
"code": "MP"
},
{
"name": "Ohio",
"code": "OH"
},
{
"name": "Oklahoma",
"code": "OK"
},
{
"name": "Oregon",
"code": "OR"
},
{
"name": "Palau",
"code": "PW"
},
{
"name": "Pennsylvania",
"code": "PA"
},
{
"name": "Puerto Rico",
"code": "PR"
},
{
"name": "Rhode Island",
"code": "RI"
},
{
"name": "South Carolina",
"code": "SC"
},
{
"name": "South Dakota",
"code": "SD"
},
{
"name": "Tennessee",
"code": "TN"
},
{
"name": "Texas",
"code": "TX"
},
{
"name": "Utah",
"code": "UT"
},
{
"name": "Vermont",
"code": "VT"
},
{
"name": "Virgin Islands",
"code": "VI"
},
{
"name": "Virginia",
"code": "VA"
},
{
"name": "Washington",
"code": "WA"
},
{
"name": "West Virginia",
"code": "WV"
},
{
"name": "Wisconsin",
"code": "WI"
},
{
"name": "Wyoming",
"code": "WY"
}
],
}
}
}
</script>
I'm using the component in my form component here.
<template>
<div class="container col-lg-4 mx-auto bg-secondary p-5 mt-5" style="--bs-bg-opacity: .3;">
<h3>Consumer Details</h3>
<hr>
<div class="row mb-3 mt-4 p-2" style="--bs-bg-opacity: .3;">
<div class="col-12 mb-2">
<label for="consumer_name" class="form-label">Consumer Name</label>
<input type="text" class="form-control" name="consumer_name" id="consumer_name" v-model="consumer.name">
</div>
<div class="col-12 mb-2">
<label for="consumer_address" class="form-label">Address</label>
<input type="text" class="form-control" id="consumer_address" v-model="consumer.address">
</div>
<div class="mb-1 d-inline-flex">
<div class="col-4">
<label for="consumer_city" class="form-label">City</label>
<input type="text" class="form-control" id="consumer_city" v-model="consumer.city">
</div>
<div class="col-4" style="margin-top: 9px;">
**<StatesDropdown
v-model="consumer.state"
:options="consumer"
:filterable="true"
/>**
</div>
<div class="col-4">
<label for="consumer_zip" class="form-label">Zip</label>
<input type="text" class="form-control" id="consumer_zip" v-model="consumer.zip">
</div>
</div>
<hr style="height: 2px; width: 90%;" class="mt-5 mb-5 text-black mx-auto">
<h3>Creditor Details</h3>
<hr>
<div class="row mb-3 mt-4" style="--bs-bg-opacity: .3;">
<div class="col-12 mb-2">
<label for="creditor_name" class="form-label">Creditor Name</label>
<input type="text" class="form-control" id="creditor_name" v-model="creditor.name">
</div>
<div class="col-12 mb-2">
<label for="creditor_address" class="form-label">Address</label>
<input type="text" class="form-control" id="creditor_address" v-model="creditor.address">
</div>
<div class="mb-1 d-inline-flex">
<div class="col-4">
<label for="creditor_city" class="form-label">City</label>
<input type="text" class="form-control" id="creditor_city" v-model="creditor.city">
</div>
<div class="col-4" style="margin-top: 9px;">
<StatesDropdown v-model="creditor.state" />
</div>
<div class="col-4">
<label for="creditor_zip" class="form-label">Zip</label>
<input type="text" class="form-control" id="creditor_zip" v-model="creditor.zip">
</div>
</div>
</div>
<div><button type="submit" class="btn btn-primary" #click="onSubmit">Submit</button></div>
</div>
Download Debt Letter
</div>
</template>
<script>
import {Link} from "#inertiajs/inertia-vue3";
import StatesDropdown from "#/Pages/Partials/StatesDropdown";
export default {
components: { StatesDropdown, Link },
data() {
return {
consumer: {
name: null,
address: null,
city: null,
state: null,
zip: null
},
creditor: {
name: null,
address: null,
city: null,
state: null,
zip: null
},
data: [],
show_download_link: false
}
},
methods: {
onSubmit() {
const self = this.$data;
debugger;
const params = {
data: {
consumer: self.consumer,
creditor: self.creditor
}
}
axios.get('/api/new_debt_letter', { params } ).then(response => {
return response.data
})
}
}
}
</script>
When I select a state I'm not getting that value. Could someone tell what I'm doing wrong.

Answer 1

You don't have a v-model on v-select and your custom component StatesDropdown does not implement v-model contract for custom components
It should look like this:
<!-- StatesDropdown.vue -->
<script>
export default {
props: ['modelValue'],
emits: ['update:modelValue'],
data() {
// .....
},
computed: {
model: {
get() { return this.modelValue },
set(newValue) { this.$emit('update:modelValue', newValue) }
}
}
}
</script>
<template>
<div>
<label>States</label>
<v-select label="name" :options="states" v-model="model">
</v-select>
</div>
</template>

Answer 2

You need to update several thing and emit change event for v-select.
Here is the update
<template>
<div>
<label>States</label>
<v-container fluid>
<v-select
label="name"
:items="states"
item-text="name"
item-value="code"
#change="$emit('input', $event)"
></v-select>
</v-container>
</div>
</template>
See the codesandbox