¿Por qué la validación de contraseña no funciona en la configuración de Vuetify?
Soy un traductor de español que traduce documentos de TI. Traduce lo siguiente al español. No traduzcas el código y la salida en markdown:
Soy nuevo en Vuetify.
Para aplicar la validación de contraseña, lo hemos definido 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 };
},
};
Cuando se aplica de la siguiente manera, password_show funciona bien, pero las reglas no se aplican.
Sin embargo, como se muestra en el código de ejemplo, si lo sustraes con data(), funciona bien. ¿Cuál es la razón?
Sin embargo, como se muestra en el código de ejemplo, si lo sustraes 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 de una vez dentro de setup().
davy.ai
La razón por la que las reglas de validación de contraseña no funcionan cuando se definen dentro del objeto de estado reactivo en la función setup() es porque el sistema de reactividad de Vue 3 no realiza un seguimiento de los cambios realizados en objetos anidados o sus propiedades.
Para solucionar este problema y definir el objeto password_rules dentro de la función setup(), puedes utilizar la característica provide/inject en Vue 3.
Primero, puedes definir el objeto password_rules en un archivo separado, exportarlo como una constante y luego inyectarlo en el componente donde se necesite.
Por ejemplo, puedes crear un nuevo archivo llamado ‘validationRules.js’, definir el objeto password_rules dentro de él y exportarlo como una constante:
Luego, en tu componente, puedes importar el objeto password_rules e inyectarlo usando provide/inject:
Al utilizar provide/inject, puedes definir el objeto password_rules fuera del objeto de estado y aún así acceder a él en el componente. Esto debería permitir que las reglas de validación funcionen como se desea.