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

Why is password validation not working in setup in vuetify?

我是 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() 中一次定义它。

在 vue 设置函数中,与 data 不同,您无权访问 this,因此 this.$t 在设置函数的规则中未定义:

  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'),
      },
    };
  },

要在设置函数中访问 i18n,您需要这样的东西:

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

这里有更多关于 using i18n with the Vue 3 composition api

查看此 post 中的答案:How to connect Vue 3 with Vuetify?

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