类星体循环Q选择验证

Question

我有一个用户选择的组件，其中我正在通过数组循环并相应地添加用户。

这是代码的模板部分，

<template>
  <div>
    <div class="row q-col-gutter-y-lg q-mb-lg">
      <div v-for="(user, index) in users" :key="index" class="col-12">
        <div
          class="row items-center"
          :class="{ 'q-col-gutter-x-md': $q.screen.gt.sm }"
        >
          <div class="col-11">
            <div class="row q-col-gutter-x-md ">
              <div class="col-12">
                <q-select
                  outlined
                  dense
                  :value="user"
                  :options="userOptions"
                  options-selected-class="text-primary text-weight-600"
                  class="no-shadow input-radius-6"
                  @input="onSelect($event, index)"
                  :rules="[val => !!val[index] || 'Please select a user']"
                >
                  <template v-slot:selected>
                    <template v-if="!!user && user.username !== ''">
                      {{ user.username }}
                    </template>
                    <template v-else>
                      <span class="text-grey">
                        {{ $t("userSelector.title") }}
                      </span>
                    </template>
                  </template>
                  <template v-slot:option="scope">
                    <q-item v-bind="scope.itemProps" v-on="scope.itemEvents">
                      <q-item-section>
                        <q-item-label
                          :class="
                            scope.opt.username === user.username
                              ? 'text-primary text-weight-600'
                              : ''
                          "
                          >{{ scope.opt.username }}</q-item-label
                        >
                      </q-item-section>
                    </q-item>
                  </template>
                </q-select>
              </div>
            </div>
          </div>
          <div class="col-1">
            <q-btn
              @click="removeUser(index)"
              icon="delete"
              flat
              round
              color="red"
              size="md"
            />
          </div>
        </div>
      </div>
    </div>
    <div class="row">
      <q-btn
        @click="addUser()"
        outline
        class="radius-6"
        icon="add"
        size="md"
        color="primary"
        label="Add More Editors"
      />
    </div>
  </div>
</template>

这是我的脚本部分，

<script>
export default {
  name: "userSelect",
  data() {
    return {
      users: []
    };
  },
  methods: {
    onSelect(value, selectedIndex) {
      this.users[selectedIndex].username = value.username;
      this.users[selectedIndex].id = value.id;
      this.$emit(
        "update:user",
        this.users.length > 0
          ? this.users.map(user => {
              return { id: user.id };
            })
          : []
      );
    },
    addUser() {
      this.users.push({
        username: "",
        id: null
      });
    },
    removeUser(index) {
      this.users.splice(index, 1);
      this.$emit(
        "update:user",
        this.users.length > 0
          ? this.users.map(user => {
              return { id: user.id };
            })
          : []
      );
    }
  },
  computed: {
    userOptions() {
      return [{
       id:1,
       username:'User 1'
      },
      {
       id:2,
       username:'User 2'
      }
     ]
    }
  }
};
</script>

一切正常，但是我似乎无法弄清楚如何将验证应用于我的Q-select。现在，有了当前规则，当我不选择用户时，我会遇到错误，但是即使我这样做，错误也不会被清除。

在这里：两个Q-选择都是无效的。我已经尝试了我能想到的所有可能的规则，但是我无法正常工作。

编辑：添加了沙盒链接。

Answer 1

我发现了。我只需要将user.username添加到：q-select的值