¿Cómo pongo en mayúscula solo la primera letra de la información sobre herramientas del título (de un span )? Intenté usar CSS text-transform: capitalize; , pero no funcionó.
<template lang="pug"> .cell-audience-status-dot(:class="{'overflow-initial': type === 'actions'}") .cell-content.audiences(v-if="data !== 'never_activated'") .icon-wrapper(:class="{ active : activeMenu === 'activeSegments' && openedSegments.includes(fullData.id) }") span.icon(:title="data" :class="getStatusColor") ● </template> <script> import { get } from 'vuex-pathify' export default { name: 'cellStatus', props: ['data', 'type', 'fullData'], computed: { openedSegments: get('activeSegments/openedSegments'), activeMenu: get('menu/activeMenu'), getStatusColor() { const { data } = this if (data === 'active') return 'green' else if (data === 'inactive') return 'red' else if (data === 'paused') return 'orange' return '' } }, } </script>Cree una propiedad calculada que devuelva la forma de data en mayúscula:
export default { computed: { title() { return this.data?.length && this.data[0].toUpperCase() + this.data.slice(1) } } } Y en lugar de data , vincule el accesorio calculado al atributo de title del span :
span.icon(:title="title" :class="getStatusColor") ● 👆para poner en mayúscula solo la primera letra de un texto, puede usar el selector css :first-letter y text-transform: uppercase;
.title:first-letter { text-transform: uppercase; } <div class="title">my text</div>