Elegant Way to Get Selected Option Text in Vue.js

Introduction to the Problem

In web development, retrieving the text of a selected option in a dropdown is a common task. While jQuery provides a straightforward method, transitioning to Vue.js requires a different approach due to its reactive data binding nature.

Core Solution: Binding Object Values

The most elegant approach in Vue.js involves binding the selected value to an object that contains both the identifier and the text. This method leverages Vue's v-model directive to create a two-way data binding, allowing direct access to the text through the bound object's properties.

For instance, instead of setting the option values as simple strings or numbers, you can bind them to objects with attributes such as id and text. This way, when an option is selected, the entire object is stored in the Vue instance's data, enabling you to display the text elsewhere in the template.

Code Implementation

Here is a complete example based on the provided answer. First, define the Vue instance with data including a selected object and a list of products or items.

var app = new Vue({
  el: '#app',
  data: {
    selected: {},
    products: [
      {id: 1, name: 'A'},
      {id: 2, name: 'B'},
      {id: 3, name: 'C'}
    ]
  }
})

In the HTML template, use v-for to iterate over the products and bind the value to an object.

<div id="app">
  <select v-model="selected">
    <option v-for="product in products" v-bind:value="{ id: product.id, text: product.name }">{{ product.name }}</option>
  </select>
  <h2>Value: {{ selected.id }}</h2>
  <h2>Text: {{ selected.text }}</h2>
</div>

In this setup, when an option is selected, selected becomes an object with id and text properties, allowing you to display the text directly in the template using {{ selected.text }}.

Alternative Approach: Using Change Event

As an alternative, you can use the @change event to handle the selection and access the DOM element's properties. This method is more imperative and similar to jQuery but can be useful in certain scenarios.

For example, in the template:

<select @change="handleChange">
  <option value="1" data-foo="bar123">Bar</option>
  <option value="2" data-foo="baz456">Baz</option>
  <option value="3" data-foo="fiz789">Fiz</option>
</select>

In the Vue methods:

methods: {
  handleChange(e) {
    if (e.target.options.selectedIndex > -1) {
      console.log(e.target.options[e.target.options.selectedIndex].innerText);
    }
  }
}

This approach retrieves the text via innerText, but it requires manual DOM manipulation and may not be as reactive as the object binding method.

Conclusion

In Vue.js, retrieving the text of a selected option can be efficiently done by binding object values with v-model, providing a declarative and reactive solution. While alternative methods exist, such as using change events, the object binding approach is recommended for its simplicity and alignment with Vue's reactive principles. This technique enhances maintainability and reduces the need for direct DOM access, making it a best practice in modern web development with Vue.js.