Scribd
Upload
11 views2 pages

Template

This document defines a Vue component that displays a list of job listings. It imports a JobListing component and defines sample job listing data as an array of objects with properties like company, position, skills, etc. The component loops through the jobs array and renders a JobListing component for each one, passing in the corresponding job data.

Uploaded by

Nateqa Waqas
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
11 views2 pages

Template

This document defines a Vue component that displays a list of job listings. It imports a JobListing component and defines sample job listing data as an array of objects with properties like company, position, skills, etc. The component loops through the jobs array and renders a JobListing component for each one, passing in the corresponding job data.

Uploaded by

Nateqa Waqas
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

<template>

    <div class="container mx-auto p-4">


      <h1 class="text-2xl font-bold mb-4">Job Listings</h1>
      <div>
        <JobListing v-for="job in jobs" :key="job.id"
          :logo="job.logo"
          :company="job.company"
          :position="job.position"
          :skills="job.skills"
          :postedAt="job.postedAt"
          :contract="job.contract"
          :location="job.location"
        />
      </div>
    </div>
  </template>
 
  <script>
  import JobListing from '../components/JobListing.vue';
 
  export default {
    components: {
      JobListing
    },
    data() {
      return {
        jobs: [
          // Define your job listings here as objects with the required
properties
          {
            id: 1,
            logo: require('@/assets/images/company-logo-1.png'),
            company: 'Company 1',
            position: 'Frontend Developer',
            skills: ['HTML', 'CSS', 'JavaScript'],
            postedAt: '1d ago',
            contract: 'Full Time',
            location: 'Remote'
          },
          {
            id: 2,
            logo: require('@/assets/images/company-logo-2.png'),
            company: 'Company 2',
            position: 'UI Designer',
            skills: ['UI Design', 'Adobe XD', 'Photoshop'],
            postedAt: '3d ago',
            contract: 'Part Time',
            location: 'New York'
          },
          // Add more job listings as needed
        ]
      };
    }
  };
  </script>
 
  <style>
  /* CSS for the component */
  </style>
 

You might also like