vue.js - 如果在 vue 的下拉列表中选择了默认值，如何进行验证并显示消息

Question

我有一个下拉列表，我想进行验证。

所以这是我的下拉组件：

<template>
    <div class="custom-select" :tabindex="tabindex" @blur="open = false">
        <div class="selected" :class="{ open: open }" @click="open = !open">
            {{ selected.name }}
        </div>
        <div class="items" :class="{ selectHide: !open }">
            <div v-if="defaultValue != ''">{{defaultValue}}</div>
            <div v-for="(option, i) of options" :key="i" @click=" selected = option; open = false; $emit('input', option);">
                {{ option.name }}
            </div>
        </div>

    </div>
</template>

<script>
export default {
    props: {
        options: {
            type: Array,
            required: true,
        },
        defaultValue: {
            type: String,
            required: false,
            default: "Choose an option",
        },
        tabindex: {
            type: Number,
            required: false,
            default: 0,
        },
    },
    data() {
        return {
            open: false,
            selected: this.setDefaultValue(),
        };
    },
    mounted() {
        this.$emit("input", this.selected);
    },
    methods: {
        setDefaultValue () {
            if (this.defaultValue == '' && this.options.length > 0) {
                return this.options[0];
            }
            return { name: this.defaultValue};
        }
    }
};
</script>

在我的父组件中，我正在使用这个下拉列表，从 API 调用中获取的值并填充了变体。所以我想要做的是，如果未选择该值（默认值：“选择一个选项”），我想给出一条错误消息，即下拉菜单是强制性的。

<Dropdown
                            :options="getVariations"
                            class="select"
                            @input="getSelected"
                        />

<script>

import Dropdown from "../components/Dropdown";
import apiHelper from "../helpers/apiHelper";

export default {
    components: {Dropdown},
    data() {
        return {
            selected: "",
            variationId: "",
            selectedObject: null
        };
    },
    computed: {
        getVariations() {
            return this.product.attributes.variations
        }
    },
    methods: {
        getSelected(opt) {
            this.selectedObject = opt;
            this.selected = opt.description;
            this.variationId = opt.id;
        }
    },
};
</script>

标签： vue.jsvalidationvuejs2vue-componentdropdown

Answer 1

如果要在父组件中验证，请尝试检查selectedObject.id：

Vue.component('Dropdown', {
  template: `
    <div class="custom-select" :tabindex="tabindex" @blur="open = false">
      <div class="selected" :class="{ open: open }" @click="open = !open">
          {{ selected.name }}
      </div>
      <div class="items" :class="{ selectHide: !open }">
        <div v-if="defaultValue != ''">{{defaultValue}}</div>
        <div v-for="(option, i) of options" :key="i" @click=" selected = option; open = false; $emit('input', option);">
              {{ option.name }}
        </div>
      </div>
    </div>
  `,
  props: {
        options: {
            type: Array,
            required: true,
        },
        defaultValue: {
            type: String,
            required: false,
            default: "Choose an option",
        },
        tabindex: {
            type: Number,
            required: false,
            default: 0,
        },
    },
    data() {
        return {
            open: false,
            selected: this.setDefaultValue(),
        };
    },
    mounted() {
        this.$emit("input", this.selected);
    },
    methods: {
        setDefaultValue () {
            if (this.defaultValue == '' && this.options.length > 0) {
                return this.options[0];
            }
            return { name: this.defaultValue};
        }
    }
})

new Vue({
  el: '#demo',
  data() {
        return {
            selected: "",
            variationId: "",
            selectedObject: null,
            product: {
              attributes: {
                variations: [{id: 1, name: 'name1', description: 'desc1'}, {id: 2, name: 'name2', description: 'desc2'},{id: 3, name: 'name3', description: 'desc3'},]
              }
            }
        };
    },
    computed: {
        getVariations() {
            return this.product.attributes.variations
        }
    },
    methods: {
        getSelected(opt) {
            this.selectedObject = opt;
            this.selected = opt.description;
            this.variationId = opt.id;
        },
        submit() {
          if (!this.selectedObject.id) alert('pls select option')
          else console.log(this.selectedObject)
        }
    },
})

Vue.config.productionTip = false
Vue.config.devtools = false

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
<button @click="submit">submit</button>
  <Dropdown
    :options="getVariations"
    class="select"
    @input="getSelected"
  />
  
</div>