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

Question

我是 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 设置函数中，与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

Answer 2

在这篇文章中看到答案：How to connect Vue 3 with Vuetify?

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