How can I convert conditional VueJS if statement to a Computed Property? - vue.js

Question

How can I convert the code below to a computed property in Vue?
What I am trying to achieve is:
I would like to display the div tag if the type that has been chosen is not userKeys or adminKeys. However, if the type is determined to be userKeys or adminKeys, then I want the userKeysIcon and adminKeysIcon to be shown respectively. Is there a way I can achieve this using a computed value in VueJs?
var markUp = Vue.compile('\
<a class="box" ref="addProofBox" href="#" role="button" :id="\'Add_\' + type" #click.prevent="clickBox" v-preventTabbing:[preventTabbingValue]>\
<div class="ms-Grid">\
<div class="ms-Grid-row">\
<div class="ms-Grid-col" :class="{ \'ms-sm2\': this.type != \'showMoreOptions\' }">\
<div v-if="type != \'userKeys\'" class="box-icon" aria-hidden="true" :class="icon"></div>\
<img v-else-if="type = userKeys" :src="userKeysIcon" role="presentation" class="box-icon-img"/>\
<img v-else ="type = adminKeys" :src="adminKeysIcon" role="presentation" class="box-icon-img"/>\
</div>\
<div class="ms-Grid-col ms-sm10">\
<div class="box-title">{{ title }}</div>\
<div class="box-description" :class="{ \'text-align-center\': this.type == \'showMoreOptions\' }">{{ desc }}</div>\
</div>\
</div>\
</div>\
</a>');

Answer 1

As long as type is not dynamically provided in the template itself, e.g. as result of a loop, just create a computed property and use it.
I'm not sure why you use the Vue.compile approach, so here is a example in the current composition api pattern and assuming that type is a component prop:
<template>
<a class="box" ref="addProofBox" href="#" role="button" :id="'Add_' + type" #click.prevent="clickBox" v-preventTabbing:[preventTabbingValue]>
<div class="ms-Grid">
<div class="ms-Grid-row">
<div class="ms-Grid-col" :class="{ 'ms-sm2': type != 'showMoreOptions' }">
<img v-if="hasMatchingKeys" :src="keysIcon" role="presentation" class="box-icon-img" />
<div v-else class="box-icon" aria-hidden="true" :class="icon" />
</div>
...
</div>
</div>
</a>
export default {
props: {
type: {
type: String,
required: true
},
userKeysIcon: {
type: String,
required: true
},
adminKeysIcon: {
type: String,
required: true
},
},
setup(props) {
const hasMatchingKeys = computed(()=>["userKeys", "adminKeys"].includes(props.type));
const keysIcon = computed(()=>{
const {type, adminKeysIcon, userKeysIcon} = props;
const iconMap = new Map([['userKeys', userKeysIcon],['adminKeys', adminKeysIcon]])
const icon = iconMap.get(type)
return icon || ""
});
return {isUserKeys, keysIcon}
}
}
i would also suggest to move all string concatenations and and object-buildings (like the one where class names are determined) into computed props. not only it is better to read, but also the vue code styles recommend to reduce complexity from templates.