CODEWITHSUNDEEP
javascriptvue.jsvuetify.js
ToddT
ToddT

Reputation: 3258

Retrieve index of just one element in v-for loop

Based on the validation response from a text-field I'm trying to disable or enable ONE button based on its index in my v-for loop. However, right now I'm disabling BOTH buttons.

My idea was to get the index of the button based on the info in my v-for loop. However when I try and get the index of the button the v-for loop is running and it returns the indices of both buttons.

So my question is how to get the index of just one button, the button that is in the same form as the text-field that is returning the error.

(link to code running at the bottom of my code samples)

Here is my template code:

<template>
<v-container fluid grid-list-lg class="come_closer">
  <v-layout row wrap>
    <v-flex xs12 v-for="(creds, index) in amazonCredsArray" :key="creds.id" class="pb-4">
      <v-card class="lightpurple">
        <v-card-title>
          <v-icon class="my_dark_purple_text">language</v-icon>
          <h1 class="title oswald my_dark_purple_text pl-2 pr-5">ENTER YOUR AMAZON CREDENTIALS BELOW</h1>
        </v-card-title>

     <v-form ref="form" lazy-validation>
        <v-layout xs12 row wrap class="mx-auto" >
          <v-flex xs12>
            <v-text-field
              :rules="[sellerId]"
              required
              color="indigo"
              label="Amazon Seller Id"
              v-model="creds.seller_id"
              prepend-icon="person"
            ></v-text-field>
          </v-flex>

Here is the row where my button is:

<v-layout row wrap class="text-xs-center" v-if="show_cancel_button">
  <v-flex xs6>
    <v-btn
      :id="creds.id"
      block 
      large 
      class="my_dark_purple_btn" 
      dark 
      @click="formCheckAndSend()"
      :class="{looks_disabled: isDisabled(creds, index)}"
      >{{ whichTextToShow }}
    </v-btn>
  </v-flex>
  <v-flex xs6>
    <v-btn block outline large color="indigo" dark @click="sendBackToSpeeds">Cancel</v-btn>
  </v-flex>
</v-layout>

Then here is my rule that is returning the error on that text-field. I was trying to pass in the index into it, but it wasn't working:

sellerId(value, index) {
  if (value.length === 0) {
    // this.disabled = true;
    console.log("What's my value " + value + "and my index " + index);
    return "What are you trying to do here?";  
  } else {
    // this.disabled = false;
    return true;
  }
},

You can see my code running here

Upvotes: 1

Views: 64

Answers (1)

akuiper
akuiper

Reputation: 215117

You can pass the index to the rule:

<v-text-field :rules="[ v => sellerId(v, index) ]" ...></v-text-field>

Upvotes: 1

Related Questions