我如何使用计算属性根据单词使用 vue 组合 api 来更改文本药丸的颜色？

Question

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 class="float-left text-center w-24 inline-block flex-shrink-0 rounded-full px-2 py-0.5 text-xs font-medium text-white inset-x-0 top-0" :class="reportStatus">
{{ dashboards.status }}</span>
</div>

Script Dashboard code:

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

Answer 1

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 class="fload ..." :class="[ dashboard.status === 'Production' ? 'status-production' : 'status-qa']">{{ 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 class="float ..." :class="addClass">{{ 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.

Answer 2

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

<div>
    <span :class="`float-left text-center w-24 inline-block flex-shrink-0 rounded-full px-2 py-0.5 text-xs font-medium text-white inset-x-0 top-0 ${reportStatus}`">
        {{ dashboards.status }}
    </span>
</div>

Answer 3

Your code should work fine, Just for a demo purpose I am using just an object for dashbaords variable but you can change it to an array as per your requirement.

Here is the live demo (Please have a look and try to find the root cause of the issue you are facing by referring this) :

 const { ref, computed, onMounted } = Vue; let options = { setup: function () { let dashboards = ref({}); const reportStatus = computed(function() { return (dashboards.value.status === 'Production')? 'status--production': 'status--qa' }); onMounted(function() { dashboards.value = { report: "Ad Hoc", description: "", status: "Production" } }); return { dashboards, reportStatus }; } }; let appVue = Vue.createApp(options).mount('#app');

 .status--production { background-color: blue; color: white; border: 1px solid black; }.status--qa { background-color: green; color: white; border: 1px solid black; }

 <script src="https://unpkg.com/vue@3.0.0-beta.14/dist/vue.global.js"></script> <div id="app"> <span:class="reportStatus"> {{ dashboards.status }} </span> </div>