Tengo dos componentes: componente A y Componente B. En el componente A, tengo un accesorio llamado hasBorder con tipo booleano y cuando llamo al componente A en el componente B, pasé el valor a un componente de accesorios del componente A, tengo un error.
componente HTML A:
<div> <img src="path" :style="hasBorder ? 'border:5px;': ''"/></div>js componente A:
Vue.component('compA', { props: { hasBorder:{ type:Boolean, default:false } } });html componente B:
<div> My image : <compA has-border="myStyle"></compA></div>js componente B:
Vue.component('compB', { data: { return { myStyle : { type:Boolean, default :true} } } }); Tengo este error "Accesorio no válido: la verificación de tipo falló para el accesorio hasBorder . Booleano esperado, se obtuvo una cadena con el valor "miEstilo".
como puedo solucionar este error por favor
Espera un valor bool pero está intentando enviar un objeto.
Prueba esto
Vue.component('compB', { data: { return { myStyle : true } } });Y usa v-bind
<div> My image : <compA v-bind:has-border="myStyle"></compA></div>Debe vincular sus accesorios con v-bind: o : para pasar datos. La propiedad de datos debe ser una función que devuelva un objeto. Por favor, eche un vistazo al fragmento:
const app = Vue.createApp({ data() { return { myStyle: true, myPath: 'https://picsum.photos/100' }; }, }) app.component('compA', { template: ` <div><img :src="path" :style="hasBorder ? 'border: 5px solid turquoise;': ''"/></div> `, props: { hasBorder:{ type:Boolean, default:false }, path: { type: String, default: '' } } }) app.mount('#demo') <script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script> <div id="demo"> <div> My image : <comp-a :has-border="myStyle" :path="myPath"></comp-a></div> </div>