How can I use a computed property to change the color of a text pill depending on the word using vue-CodePudding

I have a pill shape that say's either Production or Development. I want the background color to be different depending on if it is production or development. I've done this before with option api, but I'm having trouble in composition api.

Computed Method:

const reportStatus = computed(function() {
  if (dashboard.status === 'Production') {return 'status--production'}
    return 'status--qa'
});

Styling:

.status--production {
  background-color: blue;
  color: white;
}

.status--qa {
  background-color: green;
  color: white;
}

Template code:

<div>
<span  :>
{{ dashboards.status }}</span>
</div>

Script Dashboard code:

const dashboard = [
  {
    report: "Ad Hoc",
    description: "",
    status: "Production"
  },

CodePudding user response：

Use computed properties for things like changing reactive variable output. For example, some different date format.

The best way to your issue is:

<template>
   <span  :>{{ dashboard.status }}</span>
</template>

Make sure dashboard is a reactive object/value like ref() or reactive() second one fit best for objects. Objects are tricky to use every time you have to assign a full new object instead of just change a value in it.

Computed property:

<template>
    <div>
        <span  :>{{ dashboard.status }}</span>
        <button @click="dashboard = { ...dashboard, status: 'lol' }">Change</button>
        <button @click="dashboard = { ...dashboard, status: 'Production' }">Production</button>
    </div>
</template>

<script setup>
const dashboard = ref({ status: 'Production' })

const addClass = computed(() => dashboard.value.status === 'Production' ? 'status-production' : 'status-qa')
</script>

If you use ref() and change dashboard like "dashboard.value.status = 'some value'" reactivity won't work same as "dashboard.status = 'some value'" in template. You will always need to assign a new object to trigger reactivity.

reactive() don't have that problem because all items inside of it are reactive.

CodePudding user response：

When you have two class attributes, the second one gets ignored. Combine your two class attributes into one;

<div>
    <span :>
        {{ dashboards.status }}
    </span>
</div>