Soy completamente nuevo en VueJS y estoy tratando de crear una lista de mosaicos de proyectos con diferentes valores de datos por mosaico. Yo uso Vue CLI. Creé un componente que es mi plantilla para un mosaico de proyecto.
componente TheProjectTile.vue :
<template> <router-link to="{{ project.url }}"> <div class="row project-container" style="background-color: {{ project.backgroundcolor }};" v-scrollanimation > <div class="column column-60"> <h2>{{ project.title }}</h2> <div class="button">view</div> </div> <div class="column"> <img src="@/assets/img/{{ project.image }}" alt="{{ project.title }}" /> </div> </div> </router-link> </template> <script type="text/javascript"> export default { props: { project: Object }, data() { return {} } } </script>Luego tengo mi Vista en mi aplicación Vue CLI donde quiero representar los mosaicos del proyecto y donde quiero dar los datos a los mosaicos:
Ver dónde se deben mostrar los proyectos
<template> <div id="projekte"> <section class="container"> <div id="projects"> <projectlist v-for="project in projects" :project="project" /> </div> </section> </div> </template> <script> import TheProjectTile from './components/TheProjectTile' export default { components: { projectlist: TheProjectTile }, data() { return { projects: [ { url: '/projekte/client1', backgroundcolor: '#005ca9', title: 'Website client 1', img: 'client1.png' }, { url: '/projekte/client2', backgroundcolor: '#c10b25', title: 'Website client 2', img: 'client2.png' } ] } } } </script>¿Qué debo cambiar para que funcione? :/
Por favor, eche un vistazo al siguiente fragmento:
Necesita vincular datos con v-bind o : en v-for loop necesita clave
Vue.component('projectList', { template: ` <a :to="project.url"> <div class="row project-container" :style="{'background-color': project.backgroundcolor}" > <div class="column column-60"> <h2>{{ project.title }}</h2> <div class="button">view</div> </div> <div class="column"> <img :src="'@/assets/img/'+project.image" :alt="project.title" /> </div> </div> </a> `, props: { project: Object }, }) new Vue({ el: '#demo', data() { return { projects: [{url: '/projekte/client1', backgroundcolor: '#005ca9', title: 'Website client 1', img: 'client1.png'}, {url: '/projekte/client2', backgroundcolor: '#c10b25', title: 'Website client 2', img: 'client2.png'}] } } }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="demo"> <div id="projekte"> <section class="container"> <div id="projects"> <!-- 👇 key --> <project-list v-for="(project, index) in projects" :key="index" :project="project" /> </div> </section> </div> </div>