Scribd Logo
Upload

Welcome to Scribd!

  • 8 views

    Template

    Uploaded by

    Nateqa Waqas
    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.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd

    Template

    Uploaded by

    Nateqa Waqas
    8 views2 pages
    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.

    Original Title

    template

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    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.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    8 views2 pages

    Template

    Uploaded by

    Nateqa Waqas
    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.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Download as docx, pdf, or txt
    You are on page 1of 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