Vee-Validate：具有多个条件的相关下拉列表

Question

我的表单有三种依赖输入方式需要验证。

第一个下拉列表
第二个下拉菜单
第三个自由文本

我需要帮助来实现 required_if 条件，因为语法有点混乱，无法使其正常工作，并解决以下问题

当 [Issue Category] 的值为 'Other (Enter Detail)' 时，则需要禁用 [Issue]，[Detail] 字段变为必填项。
当 [Issue] 的值为 'Other (Enter Detail)' 时，[Detail] 字段变为必填字段。
第二个下拉菜单需要 v-bind:key，但不确定如何使用数字来消除控制台中出现的错误。

CodeSandbox

Answer 1

首先，请您以后在问题中包含相关代码。 Code Sandbox 很棒，非常有帮助，但在 Stack Overflow 上，目标是能够在站点内找到答案（不需要离开它来查看部分问题或答案）。

您不需要使用 required_if。相反，使用 v-validate 的对象形式，如下所示：

  <b-input 
    type="textarea" 
    v-model="item.detail" 
    v-validate="{'required':(item.issue_category == 'Other (Enter Detail)')}" 
    name="detail">
  </b-input>

对于您的其他问题，除了您还忘记给 select 一个 name 之外，它基本上是相同的。也不要在其中混合 HTML5 required 属性，我认为这没有帮助：

          <b-select
            v-model="item.issue"
            name="Issue"
            v-validate="{'required':(item.issue_category != 'Other (Enter Detail)')}"               >

就是这样！查看工作示例 here.

Vee-Validate：具有多个条件的相关下拉列表

Vee-Validate: Dependent dropdown with multiple conditions

vue.js

vee-validate

buefy