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>

kissu · Accepted Answer · 2022-11-24 21:08:53Z

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

edited Nov 24, 2022 at 21:08

kissu

47.3k16 gold badges94 silver badges196 bronze badges

answered Nov 24, 2022 at 20:27

Mina

17.8k3 gold badges24 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

jcvargas · Accepted Answer · 2022-11-24 21:47:51Z

1

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>

answered Nov 24, 2022 at 21:47

jcvargas

5015 silver badges8 bronze badges

Collectives™ on Stack Overflow

Vue.js passing Boolean value to component attribute

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related