0

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

1 respuesta 1

0

Cuando pasas datos a otra vista como lo estas haciendo

:nombre="item.nombre"

Solo necesitas llamar al nombre que le declaras. En este caso:

{{ nombre }}

y tambien tenes que declarar que datos estas recibiendo en el archivo que recibe los datos.

props: ["nombre"],

En las etiquetas en las que se llaman a un dato tienen que tener :antes de la etiqueta, en este caso: :src="item.logo".

3
  • gracias solucionado con :src="item.logo".
    – Edel Rojas
    el 12 sep. 2020 a las 18:26
  • Marca mi pregunta como respuesta correcta para poder seguir ayudando. el 12 sep. 2020 a las 18:39
  • Consejos @ElianMiranda: el término aceptado en la comunidad es respuesta aceptada y segundo pareciera un tanto una orden, es mejor recomendarle al OP que considere marcar tu aporte ya que eso es elección de el enteramente y la ayuda no debe depender que te marquen o no las respuestas como aceptadas
    – BetaM
    el 12 sep. 2020 a las 19:14

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.