为什么密码验证在 vuetify 的设置中不起作用？

Question

赏金将在 5 天后到期。 此问题的答案有资格获得+50声望赏金。 윤태일想引起对这个问题的更多关注。

我是vuetify的新手。

为了应用密码验证，我们定义如下。

<v-text-field
                  class="text-body-2"
                  value="test"
                  v-model="password"
                  :append-icon="password_show ? 'mdi-eye' : 'mdi-eye-off'"
                  :rules="[password_rules.required, password_rules.min]"
                  :type="password_show ? 'text' : 'password'"
                  @click:append="password_show = !password_show"
                  outlined
                  clearable
                  background-color="#f7f7f7"
                  :label="$t('word.password')"
                ></v-text-field>

<script>
import { reactive, toRefs } from '@vue/composition-api';
import { getLoginToken } from '@/api/login';

export default {
  setup() {
    const state = reactive({
      username: '',
      password: '',
      loginForm: null,
      password_show: false,
      username_rules: {
        required: (value) => !!value || this.$t('word.require_username'),
        min: (v) => v.length >= 8 || this.$t('word.login_rules1'),
      },
      password_rules: {
        required: (value) => !!value || this.$t('word.require_password'),
        min: (v) => v.length >= 8 || this.$t('word.login_rules1'),
      },
    });

    const action = {
      login: async () => {
        console.log(
          await getLoginToken({
            username: state.username,
            password: state.password,
          }),
        );
      },
    };

    return { ...toRefs(state), action };
  },
};
</script>

如下应用时，password_show 效果很好，但规则不适用。

但是，如示例代码所示，如果用 data() 减去它，它会很好地工作。 是什么原因？？

  data() {
    return {
      password_rules: {
        required: (value) => !!value || this.$t('word.require_password'),
        min: (value) => value.length >= 8 || this.$t('word.login_rules1'),
      },
    };
  },

我想在 setup() 中一次定义它。

Answer 1

在 vue 设置 function 中，与data不同，您无权访问this ，因此this.$t在设置 function 的规则中未定义：

  setup() {
    const state = reactive({
      ...
      username_rules: {
        // can't use "this" here
        required: (value) => !!value || this.$t('word.require_username'),
        // can't use "this" here
        min: (v) => v.length >= 8 || this.$t('word.login_rules1'),
      },
      password_rules: {
        // can't use "this" here
        required: (value) => !!value || this.$t('word.require_password'),
        // can't use "this" here
        min: (v) => v.length >= 8 || this.$t('word.login_rules1'),
      },
    });
    ...
  },

  data() {
    return {
      password_rules: {
        // "this" is available here because it's in `data`
        required: (value) => !!value || this.$t('word.require_password'),
        min: (value) => value.length >= 8 || this.$t('word.login_rules1'),
      },
    };
  },

要在设置 function 中访问 i18n，您需要以下内容：

const { t } = VueI18n.useI18n() // call `useI18n`, and spread `t` from  `useI18n` returning
return { t } // return render context that included `t`

这里有更多关于使用 i18n 和 Vue 3 组合 api

Answer 2

在这篇文章中看到答案： 如何将 Vue 3 与 Vuetify 连接起来？

我非常怀疑 VueJs3 是否与 vuetify 2 兼容。另外，在 vuetify3 文档https://next.vuetifyjs.com/en中，我还没有看到 v-text-field 组件。