Vue.js 将 Boolean 值传递给组件属性

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 condition? if condition true: if condition false

So, it should look like

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

Answer 2

You will probably require to support feature types for the Input Text.

My suggestion is to keep logic outside templates:

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

<template>
Username : <InputText/>
Password : <InputText is-password>
</template>

<template>
   <input :type="inputType" > 
</template>

<script>
import {computed} from 'vue';

export default {
    props: {
        IsPassword: Boolean
    },
    setup(props){
       const inputType = computed(() => props.IsPassword ? 'password' : 'text')

      return{
         inputType
      }
    }

}
</script>