Error in vue js, problems with v-show or v-if

Question

Good morning people, I'm going to comment on my mistake. This is a users screen. Where I have a record and an edit. Register is with id 0 and edit i have id types. My idea was, when you enter the registrar, you will see the change password fields (so far everything is perfect.). The issue is on the edit screen, my idea is until I select the role, the password fields did not appear. Once you choose the role, you can change your password. Then I have the select, of roles. That the idea would be to bring me the role. And it doesn't. It takes me the text-field, but in the v-select it doesn't bring me the value. Attached images below.

v-select error does not bring me the data.

The roles are shown to me, but I would like it to be put in the select, as in the text fields. is there any way? And there once the role is selected. The idea would be that the password fields appear. If there is no role selected, it should not appear.

 <v-form ref="form" lazy-validation>
          <v-select
            label="Rol"
            v-model="form.rolId"
            :items="roles"
            item-value="value"
            item-text="text"
            :rules="[(v) => !!v || 'Este campo es requiredo']"
            required
          ></v-select>
          <v-text-field
            v-model="form.password"
            v-show="showPassword"
            :rules="[(v) => !!v || 'Este campo es requiredo']"
            :type="'password'"
            label="Contraseña"
            required
          ></v-text-field>
          <v-text-field
            v-model="form.confirmPassword"
            v-show="showPassword"
            :rules="[(v) => !!v || 'Este campo es requiredo']"
            :type="'password'"
            label="Confirmar contraseña"
            required
          ></v-text-field>
          <v-row class="text-center">
            <v-col cols="12" lg="3">
              <v-btn
                block
                class="mr-4 blue white--text rounded-lg"
                @click="submit"
                submit
                >Guardar</v-btn
              >
            </v-col>
          </v-row>
        </v-form>

 data() {
return {
  form: {},
  showPassword: true,
  roles: [
    { value: "Agente", text: "Agente" },
    { value: "Administrador", text: "Administrador" },
  ],
};

},

 getOne(id) {
  if (id != "0") {
    this.showPassword = false;
    this.usuarioServices
      .getOne(id)
      .then((data) => {
        this.form = data;
        this.form.password = "Encripted";
        this.form.confirmPassword = "Encripted";
      })
      .catch((error) => {
        console.log(error.response.status);
      });
  }
},
submit() {
  if (this.form.password != this.form.confirmPassword) {
    this.showError("Las contraseñas no coinciden.");
    return;
  }
  this.$refs.form.validate();
  if (this.$refs.form.validate(true)) {
    Swal.fire({
      title: "Espere unos momentos ...",
      showConfirmButton: false,
    });
    if (this.form.id == "0") {
      this.usuarioServices
        .registrar(this.form)
        .then((data) => {
          Swal.close();
          if (data == "") {
            this.$router.push({ path: "/usuarios/listar" });
            this.showSuccess("Entro al sistema correctamente.");
          }
        })
        .catch((error) => {
          Swal.close();
          if (error.response.status == 401) {
            this.showError("El mail o password es invalido.");
          } else {
            this.showError(error.response.data);
          }
          console.log(error.response.status);
        });
    } else {
      this.usuarioServices
        .editar(this.form)
        .then((data) => {
          Swal.close();
          if (data == "") {
            this.$router.push({ path: "/usuarios/listar" });
            this.showSuccess("Entro al sistema correctamente.");
          }
        })
        .catch((error) => {
          Swal.close();
          if (error.response.status == 401) {
            this.showError("El mail o password es invalido.");
          } else {
            this.showError(error.response.data);
          }
          console.log(error.response.status);
        });
    }
  }
},

Answer 1

As mentioned, you are facing two challenges in your code :

1. How to hide/show password text fields based on the role select by the user ?

Instead of v-show="showPassword", You can simply do v-show="form.rolId" in both the password text fields. As form.rolld is containing the selected role value. Hence, if it will be falsy (empty/null/undefined) .. text fields will not be shown.

2. How to display/show existing role (which coming from database) in the select box when user is on edit page ?

I can see, API returning roles as an array ['Agente']. Hence, while binding the value to v-model in the <v-select>. It should be access via zero index apiResponse.roles[0].