Vue.js passing Boolean value to component attribute

Question

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
App.vue

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

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

InputText.vue

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

Answer 1

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">