How to change the input component attribute conforimng to the pinia's data vue3

Question

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>

Answer 1

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