I've been struggling to retrieve the value of a select field in my Vue project. Despite trying various methods, some of which I still have references for, I haven't succeeded yet. Here are a couple of links I've used:
- CodePen - Select Field Value
- Stack Overflow - Get selected value in dropdown list using JavaScript?
Even after all these attempts, I can't seem to capture the selected value. Is there a way to retrieve the selected value in the FormData object? I believe this approach would simplify the process.
Here's how it looks in the template:
<v-form @submit.prevent="update" id="exapi">
<v-select
id="select"
name="select"
v-bind:items="selectOptions"
v-model="selectedOption"
label="Exchange"
autocomplete
>
</v-select>
<v-text-field
name="input-api-input"
label="Enter key"
hint="Key"
v-model="password"
:append-icon="e1 ? 'visibility' : 'visibility_off'"
:append-icon-cb="() => (e1 = !e1)"
:type="e1 ? 'password' : 'text'"
>
</v-text-field>
<v-btn
color="secondary"
:loading="loading"
@click.native="loader = 'loading'"
:disabled="loading"
type="submit"
>
Change API Keys
</v-btn>
</v-form>
In the script section, I've experimented with multiple methods but haven't had any success:
updateExchangeApi() {
const form = new FormData(document.getElementById('exapi'));
const key = form.get('input-api-input');
const selectValue0 = form.get('select');
const e = document.getElementById('exchange-select');
const selectValue1 = e.options[e.selectedIndex].text;
console.log('in updateExchangeApi()');
// console.log(exchange);
console.log(key);
}
Am I missing out on any best practices here? Any advice or assistance would be highly appreciated.
UPDATE:
I should mention that I did try setting v-model="selectedOption" with selectedOption in data, but I'm still unable to fetch the value:
data: () => ({
loader: null,
LineChart,
BarChart,
UserTable,
selectedOptions: [],
selectedOption: '',
})
However, when I log selectedOption from my form submit function, I get 'undefined':
console.log(self.selectedOption);