Vue.js passing Boolean value to component attribute

I want to create a simple input component in Vue,
which if the IsPassword condition was true, set its type="password" and if it is not, set it to type="text".
I’m probably making a mistake somewhere in the syntax because I’m getting parsing javascript error

this is Simplified version of my code


import InputText from "@/components/InputText.vue";

Username : <InputText/>
Password : <InputText :isPassword="true">


<input :type="{IsPassword ? 'password':'text'}" value="Im getting error here"> 
export default {
    props: {
        IsPassword: Boolean

>Solution :

First, you should set the condition in curly brackets.

Second, the ternary operator syntax should look like condition ? if condition true : if condition false

So, it should look like

<input :type="IsPassword ? 'password' : 'text'" value="Im getting error here"> 

Leave a Reply