Display or conceal HTML content based on the input's property type

Question

Display or conceal HTML content based on the input's property type

Looking to toggle the visibility of an icon on my input based on the prop type.

If the type is set to password, the icon will be displayed for toggling between visible and hidden password; if the type is not password, the icon should be hidden by setting v-show to false.

Below is the HTML code snippet with v-show showPwIcon used to control the visibility of the icon:

<input
  ref="textField"
  v-model="textField"
  :placeholder="placeholder"
  :type="type"
>
<span v-show="showPwIcon" @click="switchVisibility">
  <i :class="[pwIcon ? 'ri-eye-line' : 'ri-eye-off-line']"></i>
</span>

And here is the JS code, without CSS included for simplicity, where v-show showPwIcon is initially set to false:

export default {
  props:{
    placeholder: {
      type: String,
      value: ''
    },
    type: {
      type: String,
      value: '',
      required: true
    }
  },
  data() {
    return {
      textField: '',
      showPwIcon: false,
      pwIcon: true
    }
  },
  watch: {
    type: function (password) {
      const inputType = this.$refs.textField.type
      if (inputType === 'password') {
        this.showPwIcon = true
      } else {
        this.showPwIcon = false
      }
    }
  },
  methods: {
    switchVisibility() {
      this.$emit('input', {
        type: this.$refs.textField.type = this.$refs.textField.type === 'password' ? 'text' : 'password'
      })
      if (this.$refs.textField.type === 'password') {
        this.pwIcon = true
      } else {
        this.pwIcon = false
      }
    }
  }
}

The issue I'm facing currently is:

When the type is set to text, the icon does not show up.

<text-field-icon
  placeholder="Placeholder here"
  type="text"
/>

Even when the type is set to password, the v-show is not getting triggered.

<text-field-icon
  placeholder="Placeholder here"
  type="password"
/>

I've tried to monitor the input type using this.$refs.textField.type but facing difficulties in getting the correct input type.

For a sample code, check out https://codesandbox.io/s/vue-tailwind-template-dteq4

Any suggestions or ideas?

javascript vue.js

Answer 1

Answer №1

To achieve this, we do not need to use the watcher or $refs.

It is important to remember that $refs do not reactively update.

<input
  v-model="textField"
  :placeholder="placeholder"
  :type="inputType"
>
<span v-show="showPwIcon" @click="switchVisibility">
  <i :class="[pwIcon ? 'ri-eye-line' : 'ri-eye-off-line']"></i>
</span>

export default {
  props: {
    placeholder: {
      type: String,
      value: ""
    },
    type: {
      type: String,
      value: "",
      required: true
    }
  },
  data() {
    return {
      textField: "",
      pwIcon: false,
      inputType: this.type
    };
  },
  computed: {
    showPwIcon() {
      return this.type === "password";
    }
  },
  methods: {
    switchVisibility() {
      this.inputType = this.inputType === "password" ? "text" : "password";
      this.$emit("input", {
        type: this.inputType
      });
      this.pwIcon = this.inputType === "text";
      console.log(this.inputType, this.pwIcon);
    }
  }
};

Answer 2

To achieve this, we do not need to use the watcher or $refs.

It is important to remember that $refs do not reactively update.

<input
  v-model="textField"
  :placeholder="placeholder"
  :type="inputType"
>
<span v-show="showPwIcon" @click="switchVisibility">
  <i :class="[pwIcon ? 'ri-eye-line' : 'ri-eye-off-line']"></i>
</span>

export default {
  props: {
    placeholder: {
      type: String,
      value: ""
    },
    type: {
      type: String,
      value: "",
      required: true
    }
  },
  data() {
    return {
      textField: "",
      pwIcon: false,
      inputType: this.type
    };
  },
  computed: {
    showPwIcon() {
      return this.type === "password";
    }
  },
  methods: {
    switchVisibility() {
      this.inputType = this.inputType === "password" ? "text" : "password";
      this.$emit("input", {
        type: this.inputType
      });
      this.pwIcon = this.inputType === "text";
      console.log(this.inputType, this.pwIcon);
    }
  }
};

Answer 3

Answer №2

For a simpler solution, consider the concept of UI = Function(State). Instead of accessing the type directly from the input element using this.$refs.textField.type, rely on the type prop.

Here is a straightforward approach:

<input
  v-model="textField"
  :placeholder="placeholder"
  :type="(showPwIcon && !pwIcon) ? 'text' : type">

<span v-show="showPwIcon" @click="switchVisibility">
  <i :class="[pwIcon ? 'ri-eye-line' : 'ri-eye-off-line']"></i>
</span>

export default {

  // Declaration of Props and Data...

  watch: {
    type: function (newVal) {
      if (newVal === 'password') {
        this.showPwIcon = true

        // Initially set password visibility to false
        this.pwIcon = true
      } else {
        this.showPwIcon = false
      }
    }
  },

  methods: {
    switchVisibility() {

      // Toggle Visibility
      this.pwIcon = !this.pwIcon;

      this.$emit('input', {
        type: this.pwIcon ? 'text' : 'password'
      })
    }
  }
}

Keep in mind that your component instance should be the source of truth, not the DOM. Using $refs to read values creates a secondary source of truth. $refs is more suitable for non-Vue compatible libraries like Charting or Video players where direct interaction with the DOM is needed.

Answer 4

For a simpler solution, consider the concept of UI = Function(State). Instead of accessing the type directly from the input element using this.$refs.textField.type, rely on the type prop.

Here is a straightforward approach:

<input
  v-model="textField"
  :placeholder="placeholder"
  :type="(showPwIcon && !pwIcon) ? 'text' : type">

<span v-show="showPwIcon" @click="switchVisibility">
  <i :class="[pwIcon ? 'ri-eye-line' : 'ri-eye-off-line']"></i>
</span>

export default {

  // Declaration of Props and Data...

  watch: {
    type: function (newVal) {
      if (newVal === 'password') {
        this.showPwIcon = true

        // Initially set password visibility to false
        this.pwIcon = true
      } else {
        this.showPwIcon = false
      }
    }
  },

  methods: {
    switchVisibility() {

      // Toggle Visibility
      this.pwIcon = !this.pwIcon;

      this.$emit('input', {
        type: this.pwIcon ? 'text' : 'password'
      })
    }
  }
}

Keep in mind that your component instance should be the source of truth, not the DOM. Using $refs to read values creates a secondary source of truth. $refs is more suitable for non-Vue compatible libraries like Charting or Video players where direct interaction with the DOM is needed.

Display or conceal HTML content based on the input's property type

Answer №1

Answer №2

Similar questions

Steps for creating a personalized @click function for a <router-link> element

`Trigger a page reload when redirecting`

Is there a way to identify the top five elements that are most frequently occurring in the array?

Is it possible to activate the jQuery .click() function for a button with specific text?

Is there a way to convert a button into clickable text that performs the same function as the original button?

Do you notice a discrepancy in the number returned by Javascript's Date.getUTCDate() when the time component is set to

What is the most effective method for creating posts, pages, and their corresponding URLs using Next.js and MongoDB

setting a deadline for rendezvous with quasar version 1

Access information through token-based verification

Synchronizing client information in real-time: tips, tricks, and expert advice

multiple elements sharing identical CSS styling

The removal of an object becomes unsuccessful when objects with lower indices have been deleted beforehand

"Combining HTML, PHP, and JavaScript for Dynamic Web

What methods can I use to conceal #! from showing on the browser's address bar?

Using the fetch method to consume a RapidAPI JSON response

The issue of AngularJS failing to bind object properties to the template or HTML element

Combining a JavaScript NPM project with Spring Boot Integration

Executing a NestJs cron job at precise intervals three times each day: a guide

What is the best way to access HTML attributes within a JavaScript function when working with a dynamic element?

Search field in DataTables appears to be misaligned