Retrieving the selected value in Vue.js

Question

Retrieving the selected value in Vue.js

Hey there! I'm currently working on retrieving the selected value of a select element. Below is the HTML code for the select:

 <select id="employee">
  <option v-bind:key="employee" v-for="employee of employees" v-bind:value="{id: employee.id}">{{ employee.name }}</option>
</select><br><br>

Here's the snippet of JavaScript where I want to log the select value to the console.

console.log(document.getElementById('employee')[0].value)

javascript vue.js select vue-component

Answer 1

Answer №1

Initially, it's unnecessary to access the 0th element when using getElementById.

To retrieve the value, try

console.log(document.getElementById('employee').value)

.

Additionally, since you are working with Vue, consider utilizing v-model.

Note that the code snippet below is for reference purposes and has not been tested thoroughly.

<template>    
    <select id="employee" v-model="selectedEmployee">
        <option v-bind:key="employee" v-for="employee of employees" v-bind:value="{id: employee.id}">{{ employee.name }}</option>
    </select>
</template>
<script>
export default {
    data: {
        selectedEmployee: null
    },
    watch: {
        selectedEmployee: (newVal) => { console.log(newVal) }
    }
}
</script>

If you're unfamiliar with v-model, it's advised to study Vue documentation further.

Explore more on this topic by reading about Form Input Bindings in Vue

Answer 2

Initially, it's unnecessary to access the 0th element when using getElementById.

To retrieve the value, try

console.log(document.getElementById('employee').value)

.

Additionally, since you are working with Vue, consider utilizing v-model.

Note that the code snippet below is for reference purposes and has not been tested thoroughly.

<template>    
    <select id="employee" v-model="selectedEmployee">
        <option v-bind:key="employee" v-for="employee of employees" v-bind:value="{id: employee.id}">{{ employee.name }}</option>
    </select>
</template>
<script>
export default {
    data: {
        selectedEmployee: null
    },
    watch: {
        selectedEmployee: (newVal) => { console.log(newVal) }
    }
}
</script>

If you're unfamiliar with v-model, it's advised to study Vue documentation further.

Explore more on this topic by reading about Form Input Bindings in Vue

Retrieving the selected value in Vue.js

Answer №1

Similar questions

Is it possible to prevent a nested child node from executing its constructor until after the constructor of its parent node has been completed?

Struggling with setting up Vue.js

What are some strategies for blocking URL access to a controller's method in Rails 3?

The name of the OpenLayers geometry is not preserved upon loading from WFS

Vue-Loader - Using Vue Loader to Import Components from a File

"JS Kyle: Utilizing JWT for Signing and Encrypting Data

Running an ESNext file from the terminal: A step-by-step guide

Is there a way for me to identify when I am "traveling" along the same path?

Is it possible to combine my Node.js/Express backend with my React.js frontend within the same directory structure?

When utilizing useEffect in Next.js, an error may occur stating that the window is

Revolutionary Approach to Efficiently Handle Multiple rows with Jquery

Is there a way to get rid of this awful hover effect on this button?

Mapping a list with sections can easily be achieved by breaking down the elements

Receiving HTML from NodeJs instead of JSON

Variable in Javascript file causing return value to be 'undefined'

Seeking a sleeker approach to composing various components with shared functions

Tips for updating the class of a button upon clicking it

Conceal DIV containers during the loading of the page, and reveal them only upon the selection of Radio Buttons

Tips for transferring a function between stateful and stateless components

The array is devoid of any elements, despite having been efficiently mapped