Recien comienzo con vue. Tengo un componente en un archivo aparte.
<template>
<section id="service-header" class="menu-ref" >
<div class="container px-5">
<div class="row px-5" >
<div class="col-md-4 wow animated fadeInUp" data-wow-dedlay="1s" data-wow-duration="4s">
<div class="text-center">
<img class="img img-responsive img-service" src="{{servicio1.logo}}" style="background-color: red">
</div>
<h2>{{logo}}</h2>
<p>{{servicio1.descripcion}}</p>
</div>
</div>
<hr>
</div>
</section>
</template>
<script>
export default {
props: ['servicio1', 'logo'],
data: function(){
return {
servicio: {
titulo: '',
descripcion: '',
logo: ''
}
}
},
computed: {
getLogo: function(){
return this.servicio.logo;
}
},
mounted() {
console.log('Component mounted.')
}
}
</script>
Cuando declaro mi componente en mi archivo blade.php lo hago de esta forma
<services-component
v-for="servicio in {{$servicios}}"
:key= "servicio.id"
:servicio1= "servicio"
:logo ="servicio.logo">
</services-component>
puedo acceder en el componente a cualquier propiedad del objeto servicio1 excepto cuando estoy asigando el src de la imagen. es decir aqui
src="{{servicio1.logo}}"
no importa que trate de acceder directamente a la variable declara en props o a una propiedad computada.
cuando ejecuto en consola npm run watch me lanza este error.
** src="{{servicio1.logo}}": Interpolation inside attributes has been removed. Use v-bind or the colon shorthand instead. For example, instead of , use .**
cual es la razon y como solucionarlo .gracias de antemano