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

Question

vue / vuetify beginner here...

I've got a form that has two checkboxes and a text-field.

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

How can I trigger validation of the v-text-field "VIP name" only when one or both of the checkboxes are selected? If none is selected, I don't want to validate the input field.

I believe I have to change this

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

To something like this

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

But I can't figure it out... =(

thanks

Answer 1

Make sure your validation rules are a computable like this:

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