javascript - vue中如何设置条件规则和必填字段？

Question

我正在尝试使少数字段有条件地需要。但我无法让它发挥作用。我设置了一个数据字段 notRequired: false并基于此，我在字段中使用它作为 :required="!notRequired"使这些字段成为不需要的，因为在某些情况下我需要这些字段，而在某些情况下我不需要，因为我试图有条件地设置它。问题是由于添加到字段中的规则，错误消息仍然出现。有没有办法让规则也有条件？

<template>
 <v-text-field
  label='Agency Name'
  v-model='agency.name'
  :rules='nameRules'
  :required="!notRequired"
  required>
 </v-text-field>
 <v-text-field
  label='Agency Code'
  :rules='codeRules'
  :required="!notRequired"
  v-model='agency.code'>
 </v-text-field>
 <v-text-field
  label='Agency location'
  :rules='locationRules'
  :required="notRequired"
  v-model='agency.location'>
 </v-text-field>
</template>

<script>
 export default {
  data: function () {
    return {
      notRequired: false,
      agency: {
        name: '',
        code: '',
        location: '',
      }
      nameRules: [
        value => !!value || 'Please enter name'
      ],
      codeRules: [
        value => !!value || 'Please enter code'
      ],
      locationRules: [
        value => !!value || 'Please enter location'
      ],
    }
  }
 }
</script>

Answer 1

您可以使用 ternary运算符有条件地添加规则，具体取决于 notRequired 的值:

 <v-text-field
   label="Agency Name"
   v-model="agency.name"
   :rules="notRequired ? 'nameRules' : []" <!-- HERE -->
   :required="!notRequired">
 </v-text-field>