javascript - Vue/Vuetify 文本字段验证取决于复选框

Question

这里是 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',
],

但是我想不出来... =(

谢谢

Answer 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;
     }
  }
});