在 Vue js 的组合框中验证用户是否 select 项

Question

我在 Vue JS 中有组合框 select 多个项目，我想验证用户 select 是否有任何项目或将其保留为空，但是当我打印 时出现问题如果用户 select 项与否

HTML

<v-col cols="6"> <v-combobox class="xrfelements" :items="xrfElementsRatios" v-model="mainElementsRatios" :rules="notEmptyRule" label="Main Elements and Ratios" multiple required small-chips outlined dense></v-combobox> </v-col>

java 脚本

validateForm: function (e) { if (document.getElementsByClassName("xrfelements").length) { console.log(document.getElementsByClassName("xrfelements".values return true;} this.errors = []; if (!document.getElementsByClassName("xrfelements").length){ console.log(document.getElementsByClassName("xrfelements").index) console.log(document.getElementsByClassName("xrfelements".values) this.errors.push('there is no element selected.') } if (this.errors.length) { this.$alert ("The following items should not be empty: " +this.errors.join(", ")) } e.preventDefault(e); },

Answer 1

这不是像 vue 这样的框架的工作方式：您通常不会直接与 DOM 交互。相反，您使用 Vue 中介。请学习 Vue 的基础知识。

new Vue({
    el: '#app',
    template: ` <v-col cols="6">
        <v-combobox  class="xrfelements" :items="xrfElementsRatios" v-model="mainElementsRatios" :rules="notEmptyRule" label="Main Elements and Ratios" multiple required small-chips outlined dense></v-combobox>
  </v-col>`,
    data() {
        return {
          notEmptyRule: [],
          mainElementsRatios: [],
          xrfElementsRatios: [],
        }
    },
    methods: {
        validateForm: function (e) {
            if (mainElementsRatios.length) {
                console.log(mainElementsRatios);
              return true;
            }

            this.errors = [];
            if (!mainElementsRatios.length) {

                console.log(document.getElementsByClassName("xrfelements").index)
                console.log(mainElementsRatios)
    this.errors.push('there is no element selected.')
}


            if (this.errors.length) {
                this.$alert("The following items should not be empty: " + this.errors.join(", "))

            }

            e.preventDefault(e);
        },
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app"></div>

在 Vue js 的组合框中验证用户是否 select 项

validate if user select items or not in combobox in Vue js

html

javascript

forms

validation

vue.js