Access $ref in v-if direcrtive

I want to show an element based on data of an other element this should be really simple.

<template>
    <section>
        <b-steps>
            <b-step-item step="2" label="Account" :clickable="isStepsClickable">

                <b-field label="Password">
                    <b-input v-model="password"
                        @input="passwordVisibleCheck()" <!-- USED TO TRIGGER FUNCTION IN METHOD
                        ref="passwordField"
                        type="password"
                        password-reveal>
                    </b-input>
                </b-field>

                <b-field>
                    <b-input type="password"
                        v-if="passwordVisible"> <-- NOT WORKING
                    </b-input>
                </b-field>
            </b-step-item>

        </b-steps>
    </section>
</template>
export default {
  data() {
    return {

      passwordVisible: false,
      passwordVisibleTwo: false,

      password: '',
    }
  },

  mounted() {
    console.log('refs',this.$refs.passwordField._data.isPasswordVisible); <-- WORKING
    this.passwordVisibleTwo = this.$refs.passwordField._data.isPasswordVisible;
    console.log(this.passwordVisibleTwo); <-- WORKING
  },

  methods:{
    passwordVisibleCheck() {
      this.$nextTick(() => {
        const passwordVisible = this.$refs.passwordField._data.isPasswordVisible;
        console.log(passwordVisible); <-- WORKING
      })
    }
  }

}

As shown in this code I want to use the element data “isPasswordVisible” of first password b-field to dynamically show the second password b-field with an v-if directive but no matther how I convert this data with mounted or methods they are only available inside method or mounted ( I don’t need to use both this is just an example what I tried already ). Console log shows always true or false depending if i click reveal password in first password b-field and input some values so its basically working. The $ref therefore which is set for first password b-field is simply not available for an v-if or v-show of the second password field.

So which is the most convenient way to use the ref of one element for an v-if of an other element i would be really thankful for an answer.

Is there a reason you’re trying to do this through $ref as opposed to just setting the data property directly from your method?

this.passwordVisible = true

Yes the reason is the first password field has a password-reveal button. If the user clicks on this button ‘isPasswordVisible’ of first password field is set true and ONLY then the second password field should be visible. If I set the data property directly, the password field would be visible all the time. This would make absolutely no sense as I would not have to hide the 2nd password field from the beginning. Why should I make the visibility of an element dependent on a data property that is set from the beginning ? Or do you think I should dynamically set the data property ‘passwordVisible’ if first pw field is clicked ? As already mentioned the 2nd password field MUST be dynamically displayed and hidden again. Using $ref to 1st pw field and query the data property ‘isPasswordVisible’ which is already implemented looked like the most elegant method to me if there is an even simpler variant I would of course also use it.

I have now found a working solution but I need to use an additional function. Instead of using:

const passwordVisible = this.$refs.passwordField._data.isPasswordVisible;

I use this so my method looks like that now:


  methods:{
    passwordVisibleCheck() {
      this.$nextTick(() => {
        this.passwordVisible = this.$refs.pw._data.isPasswordVisible;
      })
    }

Its working quite well but I need still call these function ‘passwordVisibleCheck()’ which i would like to omit if possible so in the end I would like to use just:

<b-field>
    <b-input type="password"
        v-if="this.$refs.passwordField._data.isPasswordVisible">
    </b-input>
</b-field>

Unfortunately this does not work because $refs are loaded later I have already figured this out from many other questions. I hope I have now described my desired scenario in detail.

All of your UI should be controlled by Vue, using data to control the view.

Doing this this.$refs.passwordField._data.isPasswordVisible is an anti-pattern.

If I understand your use case correctly here’s a basic example using computed to reveal the second password: https://jsfiddle.net/jamesbrndwgn/z0tdep7u/5/