vuetify use selected value

How to Use Selected Value in Vuetify

If you are working on a project with Vuetify, you might come across a situation where you need to use a selected value. Using a selected value is essential when you want to pass the data from one component to another. Here's how you can use a selected value in Vuetify.

Using v-model Directive

The easiest way to use a selected value in Vuetify is by using the v-model directive. The v-model directive is a two-way binding that binds the value of an input field with the data property in the Vue instance.

  <template>
    <v-select
      v-model="selectedValue"
      :items="['Option 1', 'Option 2', 'Option 3']"
      label="Select an option"
    ></v-select>
  </template>

  <script>
    export default {
      data() {
        return {
          selectedValue: '',
        }
      }
    }
  </script>

In the code above, we have used the v-select component of Vuetify to create a dropdown menu. We have bound the value of the selected option with the selectedValue data property using the v-model directive. Whenever the user selects an option from the dropdown, the selectedValue property gets updated automatically.

Using @input Event

You can also use the @input event to get the selected value from a Vuetify component. The @input event is triggered whenever the user selects an option from the dropdown.

  <template>
    <v-select
      :items="['Option 1', 'Option 2', 'Option 3']"
      label="Select an option"
      @input="handleSelection"
    ></v-select>
  </template>

  <script>
    export default {
      methods: {
        handleSelection(value) {
          console.log(value)
        }
      }
    }
  </script>

In the code above, we have used the @input event to call the handleSelection method whenever the user selects an option from the dropdown. The value of the selected option is passed as an argument to the method, and we have logged it to the console.

Conclusion

Using a selected value is essential when you want to pass data from one component to another. In Vuetify, you can use the v-model directive or the @input event to get the selected value from a component. Both methods are easy to use and efficient.