Question

我的页面中有这两个单选按钮：

<input type="radio" :id="DIGITAL_INVOICE_DIGITAL" name="digitalInvoice" :value="false" v-model="digitalInvoice"/>

<input type="radio" :id="DIGITAL_INVOICE_PAPER" name="digitalInvoice" :value="false" v-model="digitalInvoice"/>

它们不是 <base-radio-list> 的一部分，我也不希望它们成为。

作为使用户选择有效的一部分，它们都不是第一次选择的，因此需要验证以检查用户是否选择了。

我想使用 vee-validate 进行此验证，我该怎么做？

Answer 1

您可以在下面找到使用来自 vee-validate 的 ValidationProvider 的验证。

您可以在此 codesandbox 之上工作。让我知道进展如何。

测试.Vue

  <template>
  <div class="columns is-multiline">
    <div class="column is-6">
      <p class="control">
        <ValidationProvider
          ref="provider"
          rules="oneOf:1,2"
          v-slot="{ errors }"
        >
          <label class="radio">
            <input
              name="digitalInvoice"
              value="1"
              type="radio"
              v-model="digitalInvoice"
            />
            Yes
          </label>
          <label class="radio">
            <input
              name="digitalInvoice"
              value="2"
              type="radio"
              v-model="digitalInvoice"
            />
            No
          </label>
          <br />
          <p class="control">
            <b>{{ errors[0] }}</b>
          </p>
        </ValidationProvider>
        <br />
      </p>
    </div>
  </div>
</template>

<script>
import { ValidationProvider, extend } from "vee-validate";
import { oneOf } from "vee-validate/dist/rules";

extend("oneOf", {
  ...oneOf,
  message: "Choose one",
});
export default {
  name: "radio-buttons-test",
  components: {
    ValidationProvider,
  },
  data() {
    return {
      digitalInvoice: false,
    };
  },
  mounted() {
    this.$refs.provider.validate();
  },
};
</script>

App.vue

<template>
  <div id="app">
    <Test />
  </div>
</template>

<script>
import Test from "./components/Test";

export default {
  name: "App",
  components: {
    Test,
  },
};
</script>

<style>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

Answer 2

在Vue中，输入的值和数据对象的值是一样的。对于具有相同 v-model 的多个元素的 input radios，name 属性将被忽略，data 中存储的值将等于当前选择的 radio input 的 value 属性。

<input type="radio" :id="DIGITAL_INVOICE_DIGITAL" :value="value1" v-model="digitalInvoice"/>
<input type="radio" :id="DIGITAL_INVOICE_DIGITAL" :value="value2" v-model="digitalInvoice"/>

你的 vue 数据是：

data: {
  digitalInvoice: "value1"
}

对于未经检查的尝试：

data: {
  digitalInvoice: ""
}

如何验证单选按钮是否被选中？

2 个答案: