Tengo un componente principal <Spinner /> que pasa el tamaño del spinner size="sm" al componente secundario. El componente principal se ve así:
<template> <div v-if="isPending"> <Spinner size="sm" /> <span> Loading data...</span> </div> </template>El componente hijo se ve así:
<template> <span class="spinner-border spinner-border-{{ size }}"></span> </template> <script> export default { props: ['size'] } </script> El componente secundario genera un error porque class="spinner-border spinner-border-{{ size }}" no es la forma correcta de agregar sm a spinner-border- . Estoy buscando una forma elegante de agregar solo el sufijo de tamaño sm ( sin agregar toda la clase spinner-border-sm)
Debe vincular su clase con :class o v-bind:class :
const app = Vue.createApp({ data() { return { isPending: true, }; }, }) app.component('Spinner', { template: ` <div class=""> <span :class="'spinner-border spinner-border-'+size">{{ size }}</span> </div> `, props: ['size'], }) app.mount('#demo') <script src="https://unpkg.com/vue@3.2.29/dist/vue.global.prod.js"></script> <div id="demo"> <div v-if="isPending"> <spinner size="sm"></spinner> <span> Loading data...</span> </div> </div>