[Vuejs]-Display text based on the value returned by a class binded to a method

by

0👍

✅

i have solved this by returning an array from the isComplete method, and accessed the value by using the index.

<template>
    <button v-for="(item, index) in items" 
       :key="index" 
       :class="isComplete(item.status)[0]"
       :v-html="isComplete(item.status)[1]"
    >
    </button>
</template>
<script>
export default {
    methods: {
        isComplete(status) {
            let className, buttonText
            // there is another set of code logic here to determine the value of className. below code is just simplified for this question
            if (className == code logic) {
                className = "btn-complete"
                buttonText = "DONE"
            }
            else if (className != code logic) {
                className = "btn-progress"
                buttonText = "ON-GOING"
            }

            return [ className, buttonText ]
        }
    }
}
</script>

Leave a comment