Soy novato en vuetificar.
Para aplicar la validación de contraseña, lo definimos de la siguiente manera.
<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>Cuando se aplica de la siguiente manera, password_show funciona bien, pero no se aplican las reglas.
Sin embargo, como en el código que se muestra como ejemplo, si lo resta con data() , funciona bien. ¿¿Cuál es la razón??
data() { return { password_rules: { required: (value) => !!value || this.$t('word.require_password'), min: (value) => value.length >= 8 || this.$t('word.login_rules1'), }, }; },Quiero definirlo todo a la vez dentro de la configuración ().
En la función de configuración de vue, a diferencia de data , no tiene acceso a this , por lo que this.$t no está definido en sus reglas en la función de configuración:
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'), }, }; },Para acceder a i18n en la función de configuración, necesita algo como esto:
const { t } = VueI18n.useI18n() // call `useI18n`, and spread `t` from `useI18n` returning return { t } // return render context that included `t`Aquí hay más información sobre el uso de i18n con la API de composición de Vue 3
Viendo las respuestas en este post: ¿Cómo conectar Vue 3 con Vuetify?
Dudo mucho que VueJs3 sea compatible con vuetify 2. Además, en la documentación de vuetify3 https://next.vuetifyjs.com/en , todavía no veo el componente v-text-field.