Vue JS Inquiry into converting PHP to Vue Code

Do you want to make this PHP code into a Vue component?

<Card :status="{{ $job->status_id }}" header="some_other_prop" />

<template>
    <div class="card border-0" :class="statusClass">
        {{ header }}
    </div>
</template>

<script>
let statuses = {"-1":"danger","1": "info", ... }
let headers = {"1": "info", "2": "success", ... }

export default {
    props: {
        status: {
            type: Number,
            default: 1
        },
        header: {
            type: Number,
            default: 1
        },
    },
    computed: {
        statusClass() {
           return `bg-${statuses[this.status]}`
        }
    }
}
</script>

I will give it a try.

Thanks.

@tykus . I appreciate the help although I still do not have the desired output i want. Might be not clear on explaining my inquiry.

<template>
    <div class="row">

      <div class="col-xl-4 col-md-6" v-for="item in items">
        <div :class="statusClass">
                <h5 class="card-title text-uppercase text-muted mb-0 text-white"  v-text="item.name"></h5>
            </div>
    </div>
</template>

<script>

let statuses = {"1":"primary","2": "gray-dark", "3" : "indigo" ,"4" : "orange","5" : "primary","6" : "gray-dark" ,"7":"indigo" , "8":"orange" , "9":"primary" }


    export default {
      props: {
        items: {
          type: Array,
          default: [],
        },
        status: {
          type: Number,
          default: 1
        },
      },
      computed: {
        statusClass() {
          return 'bg-${statuses[this.item.id]} card border-0'
        }
      },
        mounted() {
            console.log('Component mounted.')
        }
    }
</script>

What I desire to get is use the value of item.id on the loop as the indicator for the css class to use.

Will appreciate the assistance.

Thanks