After successfully importing and using the Change Case library within the <script></script> element of a Vue component, I now seek to directly utilize the Change Case functions in the template itself.
As of now, my understanding is that when dealing with dynamic content in the template generated by v-for looping through an array, I must render the output of an intermediary method defined in the component's methods section which applies the Change Case function. Each case type (e.g. camelCase, snakeCase, etc.) requires a separate method to be created in order to be rendered, for example, one for capitalCase:
// ...
<div
v-for="location in locations"
:key="location.name"
>
<input
type="checkbox"
:id="`select-${location.name}`"
:value="capitalCaseLocationName(location.name)"
v-model="locationsInput"
/>
<label :for="`select-${location.name}`">
{{ capitalCaseLocationName(location.name) }}
</label>
</div>
// ...
methods: {
capitalCaseLocationName(name) {
return capitalCase(name)
}
},
// ...
I am interested in finding a way to import Change Case into the template logic so that I can use it without requiring intermediary methods like this:
// ...
<div
v-for="location in locations"
:key="location.name"
>
<input
type="checkbox"
:id="`select-${location.name}`"
:value="capitalCase(location.name)"
v-model="locationsInput"
/>
<label :for="`select-${location.name}`">
{{ capitalCase(location.name) }}
</label>
</div>
// ...
Is there any possibility of achieving this?