类星体环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-选择都是无效的。我已经试过了我能想到的每一个可能的规则，但我无法使它起作用。

编辑:添加沙箱链接。https://codesandbox.io/s/delicate-https-obt8oi?file=/src/pages/Index.vue

Answer 1

我想通了。我只需要将user.username添加到q-select的:值中。