J'ai essayé de le googler plusieurs fois mais je n'ai pas eu de chance, en gros, lorsque la page se charge puisque le mot de passe est en enregistrement automatique, le champ de texte v ne le comprend pas et rend le contenu du mot de passe devant l'étiquette, est-ce là une solution de contournement ou un correctif pour cela? Voici un ss :

enter image description here

Le composant de connexion :

  <template>
  <div>
    <v-card class="elevation-12">
      <v-toolbar color="primary" dark flat>
        <v-toolbar-title>Login</v-toolbar-title>
      </v-toolbar>
      <v-card-text>
        <v-form>
          <v-text-field
            label="E-mail"
            name="email"
            type="text"
            :rules="emailRules"
            :autofocus="'autofocus'"
          ></v-text-field>
          <v-text-field
            id="password"
            label="Senha"
            name="password"
            type="password"
          ></v-text-field>
        </v-form>
      </v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn color="primary" block>Logar</v-btn>
      </v-card-actions>
    </v-card>
  </div>
</template>

<script>
  export default {
    name: "LoginForm",
    data: () => ({
      valid: true,
      email: '',
      password:'',
      emailRules: [
        v => !!v || 'Digite um e-mail',
        v => /.+@.+\..+/.test(v) || 'O e-mail precisa ser válido.',
      ]
    })
  }
</script>

<style lang="scss">
@import "LoginForm.scss";
</style>

L'endroit où j'utilise le composant de connexion :

    <template>
  <v-content>
    <v-container fluid fill-height>
      <v-layout align-center justify-center>
        <v-flex xs12 sm8 md4>
          <LoginForm></LoginForm>
        </v-flex>
      </v-layout>
    </v-container>
  </v-content>
</template>

<script>
import LoginForm from "../components/login/LoginForm";
import Logo from '~/components/Logo.vue'
import VuetifyLogo from '~/components/VuetifyLogo.vue'

export default {
  name: 'Index',
  components: {
    LoginForm,
    Logo,
    VuetifyLogo
  },
  data: () => ({
  }),
}
</script>
9
Nícolas Teixeira 11 févr. 2020 à 03:07

2 réponses

Meilleure réponse

Comme solution de contournement simple, vous pouvez ajouter une propriété placeholder avec un espace :

...
<v-text-field
  label="Login"
  v-model="loginItem.login"
  placeholder=" "
  :rules="rules.login"
></v-text-field>
...
<v-text-field
  label="Password"
  placeholder=" "
  v-model="loginItem.password"
  type="password"
  :rules="rules.password"
></v-text-field>
...

Voilà à quoi cela ressemble lorsque le login/mot de passe a été enregistré dans votre navigateur (dans mon cas, c'est Google Chrome 80) :

Autosaved

Et avec des valeurs vides :

enter image description here

18
dreamwalker 11 févr. 2020 à 02:36

La solution qui fonctionne pour moi est de générer un attribut name aléatoire. Avec ma solution, j'ai utilisé la méthode uuid v4. Si vous comptez sur le nom, cela pourrait évidemment ne pas fonctionner pour vous à moins que vous ne conserviez une carte des noms -> sortie v4.

import { v4 } from 'uuid'
<v-text-field
    v-model="card"
    class="card-input"
    outlined
    :name="v4()"
    label="Credit Card Number"
    :rules="creditCardNumberRules"
    v-mask="[' ####  ####  ####  ####', ' ####  ####  #####  ###']"
/>
1
Josh 5 mars 2021 à 14:20