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.
Latest comments (2)
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
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.