Skip to main content
se añadieron 518 caracteres en el cuerpo
Origen Enlace
user112914
user112914

Buenas estoy probando en pasar imagenes usando Props, estoy realizando por Computed y v-bind:style pero no se ejecuta, ando tratando de usar la función o la imagen pero no me muestra error alguien sabe porque sera? o como puedo pasar imagenes a través de props, de una forma sencilla porfavor?

Home

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <CardPortfolio description="hola" imagen="../assets/wallpaper.jpg"/>
  </div>
</template>

<script>
// @ is an alias to /src
import CardPortfolio from '@/components/CardPortfolio.vue'

export default {
  name: 'Home',
  components: {
    CardPortfolio
  }
} 

<template>
    <div class="card-portfolio" @mouseenter="show" @mouseleave="show" :style="imageUrl">
        <div class="card-hover" v-show="showCard">
                {{description}}
        </div>
    </div>
</template>

<script>
export default {
    props:['description', 'imagen'],
    data(){
        return{
            showCard: false,  
        }
    },
    computed:{
         imageUrl() {
            return {"background-imagen": "url('"+this.imagen+"')"}
         }
    },
    methods:{
        show(){
          this.showCard = !this.showCard
        }
    }
}
</script>

introducir la descripción de la imagen aquí

Buenas estoy probando en pasar imagenes usando Props, estoy realizando por Computed y v-bind:style pero no se ejecuta, ando tratando de usar la función o la imagen pero no me muestra error alguien sabe porque sera?

<template>
    <div class="card-portfolio" @mouseenter="show" @mouseleave="show" :style="imageUrl">
        <div class="card-hover" v-show="showCard">
                {{description}}
        </div>
    </div>
</template>

<script>
export default {
    props:['description', 'imagen'],
    data(){
        return{
            showCard: false,  
        }
    },
    computed:{
         imageUrl() {
            return {"background-imagen": "url('"+this.imagen+"')"}
         }
    },
    methods:{
        show(){
          this.showCard = !this.showCard
        }
    }
}
</script>

introducir la descripción de la imagen aquí

Buenas estoy probando en pasar imagenes usando Props, estoy realizando por Computed y v-bind:style pero no se ejecuta, ando tratando de usar la función o la imagen pero no me muestra error alguien sabe porque sera? o como puedo pasar imagenes a través de props, de una forma sencilla porfavor?

Home

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <CardPortfolio description="hola" imagen="../assets/wallpaper.jpg"/>
  </div>
</template>

<script>
// @ is an alias to /src
import CardPortfolio from '@/components/CardPortfolio.vue'

export default {
  name: 'Home',
  components: {
    CardPortfolio
  }
} 

<template>
    <div class="card-portfolio" @mouseenter="show" @mouseleave="show" :style="imageUrl">
        <div class="card-hover" v-show="showCard">
                {{description}}
        </div>
    </div>
</template>

<script>
export default {
    props:['description', 'imagen'],
    data(){
        return{
            showCard: false,  
        }
    },
    computed:{
         imageUrl() {
            return {"background-imagen": "url('"+this.imagen+"')"}
         }
    },
    methods:{
        show(){
          this.showCard = !this.showCard
        }
    }
}
</script>

introducir la descripción de la imagen aquí

Origen Enlace
user112914
user112914

Como pasar por props imagen VUEJS

Buenas estoy probando en pasar imagenes usando Props, estoy realizando por Computed y v-bind:style pero no se ejecuta, ando tratando de usar la función o la imagen pero no me muestra error alguien sabe porque sera?

<template>
    <div class="card-portfolio" @mouseenter="show" @mouseleave="show" :style="imageUrl">
        <div class="card-hover" v-show="showCard">
                {{description}}
        </div>
    </div>
</template>

<script>
export default {
    props:['description', 'imagen'],
    data(){
        return{
            showCard: false,  
        }
    },
    computed:{
         imageUrl() {
            return {"background-imagen": "url('"+this.imagen+"')"}
         }
    },
    methods:{
        show(){
          this.showCard = !this.showCard
        }
    }
}
</script>

introducir la descripción de la imagen aquí