时间戳

首页 > 解决方案 > 如何从 Vuejs 的下拉列表中显示选定的值？

javascript - 如何从 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>

从下拉列表中我想选择特定的值，并在下拉列表中显示（绑定）选定的值。如此等等。

为此，我已经编写了功能，因此不确定如何绑定下拉列表中的选定值。

任何人都可以请帮助我。不确定代码有什么问题。或者我该如何开始以便相应地显示。

标签： javascriptvue.js

解决方案

如果您使用的是 vue.js，为什么不实现一个下拉组件，将项目传递给 select andd 使用 v-model 指令将所选项目绑定到您的 vue 数据中，以及下拉列表？

这就是它在我在 vue 中使用的许多下拉组件中的工作方式。

你可以这样做：

表单组件

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

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

下拉组件

<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>

通过这种方式，您可以通过始终知道选择了哪个项目并在父表单组件中有一个 v-model 来自定义下拉列表。

我建议你看看这个：[vue js components][1]

希望能帮助到你！[1]：https ://vuejs.org/v2/guide/components.html

推荐阅读