What is the best way to show the chosen option from a dropdown list in Vuejs?

Question

What is the best way to show the chosen option from a dropdown list in Vuejs?

thicknessexpanded: false,
method(){
    thicknessOnClick: function (event) {
      this.thicknessexpanded = !this.thicknessexpanded;
    },
    }

.dropdown-check-list3 {
  padding-left: 4px;
  padding-bottom: 25px;
  display: inline-block;
}
.dropdown-check-list3 .anchor3 {
  margin-left: 20px;
  width: 255px;
  color: #70737a;
  font-size: 14px;
  font-weight: 500;
  background-color: #ffff;
  position: relative;
  cursor: pointer;
  display: inline-block;
  padding: 5px 140px 5px 10px;
  border: 2px solid #ccc;
}
.dropdown-check-list3 .anchor3:after {
  position: absolute;
  content: "";
  border-left: 2px solid black;
  border-top: 2px solid black;
  padding: 5px;
  right: 10px;
  top: 35%;
  transform: rotate(-135deg);
}
.dropdown-check-list3 .anchor3:active:after {
  right: 8px;
  top: 21%;
}
.dropdown-check-list3 ul.items3 {
  width: 254px;
  background-color: #ffff;
  padding: 2px;
  display: none;
  margin: 0;
  border: 1px solid #ccc;
  border-top: none;
}
.dropdown-check-list3 ul.items3 li {
  background-color: #ffff;
  list-style: none;
}
.dropdown-check-list3.visible .anchor3 {
  background-color: #ffff;
}
.dropdown-check-list3.visible > span.anchor3:after {
  transform: rotate(45deg);
}

 <div
              class="dropdown-check-list3"
              :class="{ visible: thicknessexpanded }"
              tabindex="100"
            >
              <span class="anchor3" @click="thicknessOnClick">Select (mm)</span>
              <ul class="items3">
                <div class="checkbox-alignment-application-filter">
                  <li
                    id="thickness-filter1"
                    class="vh-product"
                  />
                  <label class="productlist-specific" for="thickness-filter1"
                    >2.0mm</label
                  >
                </div>
                <div class="checkbox-alignment-application-filter">
                  <li
                    id="thickness-filter2"
                    class="vh-product"
                  />
                  <label class="productlist-specific" for="thickness-filter2"
                    >22.0mm</label
                  >
                </div>
                <div class="checkbox-alignment-application-filter">
                  <li
                    id="thickness-filter3"
                    class="vh-product"
                  />
                  <label class="productlist-specific" for="thickness-filter3"
                    >3.0mm</label
                  >
                </div>
                <div class="checkbox-alignment-application-filter">
                  <li
                    id="thickness-filter4"
                    class="vh-product"
                  />
                  <label class="productlist-specific" for="thickness-filter4"
                    >4.0mm</label
                  >
                </div>
              </ul>
            </div>

To make a selection from the dropdown menu and display the chosen value, I have implemented some functionality in the code snippet provided above. However, I am facing issues when trying to bind the selected value in the dropdown. Can someone offer guidance on how to achieve this properly?

If anyone could point out any mistakes in the code or suggest a starting point on displaying the selected value accordingly, it would be greatly appreciated.

javascript vue.js

Answer 1

Answer №1

When using vue.js, consider implementing a dropdown component where you pass in the items to select and use the v-model directive to bind the selected item in your vue data as well as the dropdown itself.

This approach is commonly used in many dropdown components within vue.

You can implement it like this:

Form Component

<template>
<CustomDropDown :items="itemsList" v-model="chosenSize" />
</template>

<script>
export default {
   data() {
      return {
         itemsList = ["2mm", ...],
         chosenSize = itemsList[0]
      }
   }
<script />

Dropdown Component

<template>
 ... dropdown code 
 <li @click="updateValue(item)" v-for="item, index in items" :key="index">item</li>
 ...
</template>

<script>
export default {
props: ["value", "items"],
data() {
  return {
    chosen: this.value
  }
},
methods: {
   updatedValue(item) {
      this.chosen = item;
      this.$emit("input", item);
   }
}
</script>

This approach allows for customization of the dropdown while keeping track of the selected item and having a v-model in the parent form component at all times.

I recommend checking out [vue js components][1] for more information.

Hope this information proves helpful! [1]: https://v2.vuejs.org/v2/guide/components.html

Answer 2

When using vue.js, consider implementing a dropdown component where you pass in the items to select and use the v-model directive to bind the selected item in your vue data as well as the dropdown itself.

This approach is commonly used in many dropdown components within vue.

You can implement it like this:

Form Component

<template>
<CustomDropDown :items="itemsList" v-model="chosenSize" />
</template>

<script>
export default {
   data() {
      return {
         itemsList = ["2mm", ...],
         chosenSize = itemsList[0]
      }
   }
<script />

Dropdown Component

<template>
 ... dropdown code 
 <li @click="updateValue(item)" v-for="item, index in items" :key="index">item</li>
 ...
</template>

<script>
export default {
props: ["value", "items"],
data() {
  return {
    chosen: this.value
  }
},
methods: {
   updatedValue(item) {
      this.chosen = item;
      this.$emit("input", item);
   }
}
</script>

This approach allows for customization of the dropdown while keeping track of the selected item and having a v-model in the parent form component at all times.

I recommend checking out [vue js components][1] for more information.

Hope this information proves helpful! [1]: https://v2.vuejs.org/v2/guide/components.html

What is the best way to show the chosen option from a dropdown list in Vuejs?

Answer №1

Form Component

Dropdown Component

Similar questions

Exploring Ways to Retrieve Property Names in AngularJS JSON

Best practice for validating a form using React: Why the state doesn't update immediately with useState and onSubmit

The effects of external CSS are not being displayed or are being overridden

Unable to render dynamic ID in Next.js version 13.4.6 due to an issue

How can you display an escaped string using lit element?

Display Vue component using a string input

What are the steps to create a shadow effect on a bar chart in ChartJs?

Scrolling with a Dynamic Twist

Eliminate any unnecessary tags located before the text

Front end development in Laravel 6.2 not coming together as expected

Steps for aligning an image and text within an icon next to each other

Express.js session management -- Ensuring sessions are created exclusively for authenticated users

showing the angular response data in a HTML table layout within a specific div element

Attempting to transform a brief JavaScript script into Java code

Is it achievable to create a seamless fade in/out effect using jQuery?

The script functions smoothly on XAMPP, however, it encounters issues when deployed on

Error Alert: UnhandledPromiseRejectionWarning in Async Series Causes Concern

How can timestamps be set in MongoDB during an insertOne() operation without relying on new Date() as in PostgreSQL's NOW()?

Guide to embedding a qr code within a pdf document

Removing an item from a numeric array in mongoose: Best practices