Hi,
I've been trying to learn Vue + Nuxt for static site generation. Whilst I can write the following in a way that will render out the correct HTML. I want to get my head around some of the more advanced features.
Aim:
Write a repeating card component that allows me to easily change elements within the component.
Here is where I am atβ¦
Component:
<template>
<div class="column is-4 has-text-centered">
<div class="icon_block">
<img src=":image.src" alt=":image.alt" width=":image.width" height=":image.height" />
</div>
<h4>{{ title }}</h4>
<a href=":link.url" title=":link.title">{{ link.anchor }}</a>
</div>
</template>
<script>
export default {
name: "ContactCard",
data: {
contacts: [
{
id: '',
image: {
src: '',
alt: '',
width: ,
height: ,
},
title: '',
link: {
url: '',
title: '',
anchor: ''
}
]
}
};
</script>
Template:
<template>
<div class="footer_top">
<div class="container">
<div class="columns">
<ContactCard
v-for="contact in contacts" :key="id"
:src="image.src"
:alt="image.alt"
:width="image.width"
:height="image.height"
:title="title"
:url="link.url"
:linkTitle="link.title"
:anchor="link.anchor"
>
</ContactCard>
</div>
</div>
</div>
</template>
<script>
import ContactCard from "~/components/ContactCard.vue";
export default {
components: {
ContactCard
},
data() function {
return {
contacts: [
{
id: '1',
image: {
src: '~assets/svg/address.svg',
alt: 'Image Alt',
width: 17,
height: 30,
},
title: 'Address',
link: {
url: 'https://pagetolinkto',
title: 'Title of link',
anchor: 'Anchor Text'
}
},
]
},
};
</script>
Needless to say, this isn't working and hence I was hoping someone might be able point me in the right direction.
Top comments (2)
Regarding your ContactCard component, you have to use
props
instead ofdata
when you want to pass data to another component viav-bind
or:
There are multiple ways to declare props:
See more details about props in the official documentation.
Found a working solution, I hadn't declared contact in my template component, contact.image for example. Plus Rene comment about props really helped. Below is my working error-free codeβ¦
Component
Template