javascript - 在 v-for 循环中仅检索一个元素的索引

Question

基于文本字段的验证响应，我试图根据 v-for 循环中的索引禁用或启用一个按钮。但是，现在我正在禁用这两个按钮。

我的想法是根据我的 v-for 循环中的信息获取按钮的 index。但是，当我尝试获取按钮的索引时，v-for 循环正在运行并返回两个按钮的索引。

所以我的问题是如何获取一个按钮的索引，该按钮与返回错误的文本字段具有相同的形式。

(链接到我的代码示例底部运行的代码)

这是我的模板代码:

<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>

这是我的按钮所在的行:

<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>

然后这是我的规则，它返回该文本字段上的错误。我试图将索引传递给它，但它不起作用:

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

Answer 1

您可以将索引传递给规则:

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