Vee-Validate: Dependent dropdown with multiple conditions

Question

I have three dependent inputs ways for my form that requires validation.

1. First Dropdown
2. Second Dropdown
3. Third Free Text

I need help in implementing the required_if condition as the syntax is a bit confusing to make put it to work, and resolve the following

1. When [Issue Category] has the value 'Other (Enter Detail)', then [Issue] needs to be disabled, [Detail] field becomes required.
2. When [Issue] has the value 'Other (Enter Detail)' then [Detail] field becomes required.
3. v-bind:key is required for the second dropdown, but unsure how to use a number to remove the error that appears in the console.

CodeSandbox

Answer 1

First, please include the relevant code in your question in the future. The Code Sandbox is great, very helpful, but on Stack Overflow, the goal is to be able to find answers within the site (not needing to leave it to view parts of the question or answer).

You don't need to use required_if. Instead, use the object form of v-validate like so:

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

For your other problem, it's essentially the same except you also forgot to give the select a name which is required. Also don't mix HTML5 required attributes in there, I don't think it helps:

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

That's it! See a working example here.