Vue CLI: Project list with component

Question

I'm completely new to VueJS and am trying to create a project tile list with different data values per tile. I use Vue CLI. I created a component which is my template for one project tile.

component 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>

Then I have my View on my Vue CLI application where I want to render the project tiles and where I want to give the data to the tiles:

View where the projects should be shown

<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>

What do I need to change that it works? :/

Nikola Pavicevic · Answer 1 · 2022-05-07T18:50:20.330

Please take a look at following snippet:

You need to bind data with v-bind or :, in v-for loop you need key

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>

This works fine, only the image URLs are not processed: `` Returns "@/assets/img/filename.png" instead of /img/filename.xyz123.png in Frontend. Tried some solutions shown here but none worked. — helderiga, May 12 '22 at 11:45

Vue CLI: Project list with component

1 Answers1