Problem:
I’m having a child Input component with the dynamic attribute :placeholder? how can I change placeholders value dynamically by conditional operator if state’s object’s are different? Can I also somehow place the if-statement outside as a component’s method better?
// store
import { defineStore } from 'pinia'
export const useStore = defineStore('storeId', {
state: () => {
return {
const inputs = [
{
id: 1,
type: 'email'
},
{
id: 2,
type: 'text'
},
{
id: 3,
type: 'password'
}
]
},
})
// Child component
<script setup >
const someStore = useSomeStore()
<div v-for="input in someStore.inputs">
<Input
:type="input.type"
:placeholder="
if(input.type === email) {'place enmail'}
else-if(input.type === text) {'place text'}"
elxe {'place password'}
/>
</div>
</script>Solution:
you can use pinia action
pinia action
actions: {
getPlaceholder(inputType) {
if (inputType == 'email') {
return 'place enmail';
} else if (.........)........
}}
or can create some helper.js and then export some same function
and use it like
<Input
:type="input.type"
:placeholder="someStore.getPlaceholder(input.type)"
/>
![Need to change text to upper case in JavaScript - createJs [closed]](https://rocoderes.com/wp-content/uploads/2023/12/77329690-150x150.png.webp)
