Vue / Vuetify 文本字段验证取决于复选框答案

【问题标题】：Vue / Vuetify text-field Validation depending on checkboxesVue / Vuetify 文本字段验证取决于复选框
【发布时间】：2019-10-03 14:52:31
【问题描述】：

vue / vuetify 初学者在这里...

我有一个包含两个复选框和一个文本字段的表单。

https://jsfiddle.net/tur0gks4/3/

如何仅在选中一个或两个复选框时触发对 v-text-field“VIP 名称”的验证？如果没有选择，我不想验证输入字段。

我认为我必须改变这一点

vip_nameRules: [
  v => !!v || 'VIP name required',
],

这样的事情

vip_nameRules: [
  v => !!v || 'VIP name required',
  v => (!vip_attend && !vip_host) || 'VIP name required',
],

但我想不通... =(

谢谢

【问题讨论】：

标签： javascript validation vuejs2 vuetify.js

【解决方案1】：

确保您的验证规则是可计算的，如下所示：

Vue.use(Vuetify);

var vm = new Vue({
    el: "#app",

  data: {
    vip_attend: false,
    vip_host: false,

    vip_name: '',
  },
  computed: {
    vip_nameRules () {
        const rules = []

        if (!this.vip_attend || !this.vip_host) {
            const rule = v => !!v || 'VIP name required'
            rules.push(rule)
        }
        return rules;
     }
  }
});

【讨论】：