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

Question

在这里查看/初学者...

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

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

仅当选中一个或两个复选框时，如何触发v文本字段“ 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;
     }
  }
});