Question

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

我的想法是根据index循环中的信息获取按钮的v-for。但是，当我尝试获取按钮的索引时，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>

然后这是我的rule，它在该文本字段上返回错误。我正在尝试将索引传递进去，但是它没有用：

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>

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

1 个答案: