Unexpectedly, my dropdown menu that was functioning perfectly fine is now throwing an error. I've made several changes and none of them seem to resolve the issue. Could it be a data type mismatch or am I missing something crucial here?
Your insights on this matter would be greatly appreciated!
<div class="col-sm-12 col-md-6 col-lg-4">
<div class="form-group">
<label>Deposit Holder</label>
<v-select
class="highlights"
:options="select.offices"
:on-change="selectOffice"
:searchable="false"
:clear-search-on-select="false"
v-model="select.officeSelected"
></v-select>
</div>
</div>
data() {
return {
now: new Date().toISOString(),
loaded: false,
document: {
office_id: null,
},
select: {
offices: [
{
'value': 1,
'label': 'Nu World Title Kendall',
},
{
'value': 2,
'label': 'Nu World Title KW Kendall Office',
},
{
'value': 3,
'label': 'Nu World Title Miramar',
},
{
'value': 4,
'label': 'Nu World Title Davie',
},
{
'value': 5,
'label': 'Nu World Title Doral',
},
{
'value': 6,
'label': 'Nu World Title Miami Lakes',
},
{
'value': 7,
'label': 'Sanchez Vadillo Coral Gables',
}
],
officeSelected: '',
}
methods: {
selectOffice(option) {
this.select.officeSelected = option;
this.document.office_id = option.value;
},
mounted() {
this.selectOffice();
},