Tengo un componente info-card.vue que se usa dos veces en una página de destino, pero quiero que se muestren datos diferentes en cada uno de ellos. Aquí está el componente info-card.vue :
<template> <div class="card-container glass-effect"> <div class="illustration-container"> <img src="{{ image }}" alt="Businesses" class="illustration"> </div> <div class="title-container">{{ title }}</div> <div class="paragraph-container">{{ content }}</div> </div> </template> <script> export default { props: ['image','title', 'content'] } </script> Y aquí está la página landing-info.vue en la que se usa el componente info-card :
<div class="business-side"> <info-card image="/images/image1.png" title="BUSINESSES" content="This is some content"></info-card> </div> <div class="customer-side"> <info-card image="/images/image2.png" title="CUSTOMERS" content="This is some content"></info-card> </div>Pero esto no funcionó, soy nuevo en vue, ¿alguna idea?
No puede usar el bigote {{ }} en los atributos de vue. En su lugar, utilice v-bind:attr="" o :attr="" donde attr es el atributo dinámico que desea vincular.
Entonces, su componente de imagen debería ser:
<img v-bind:src="image" alt="Businesses" class="illustration" />o
<img :src="image" alt="Businesses" class="illustration">Los dos puntos son una abreviatura de v-bind. Lea más sobre v-bind aquí .