Within my Vue instance, I have implemented a method that conditionally generates HTML markup based on specific conditions. Although the markup remains the same for each scenario, only different styles are applied.
I am curious if there is a more elegant approach to achieve this. Should I opt for a method, computed property, or component? If a computed property is recommended, how can I pass the value for evaluation?
Does anyone know of an alternative solution?
<div v-for="item in items">
<div v-if="!_.isEmpty(item.files)">
<ul>
<li v-for="file in item.files">
<span v-html="fileIcon(file.fileExtension)"></span>
</li>
</ul>
</div>
</div>
var vm = new Vue({
el: '#root',
data: {
items: [
{
"id": 126,
"content": "blah...",
"files": [
{
"id": 8,
"filename": "test.doc",
"fileExtension": "doc"
}
]
},
{
"id": 127,
"content": "blah...",
"files": []
}
]
},
methods: {
fileIcon: function (extension) {
var str;
switch (extension) {
case "jpg":
case "jpeg":
case "png":
case "gif":
str = "<i class='fa fa-file-image-o file-picture'></i>";
break;
case "pdf":
str = "<i class='fa fa-file-pdf-o file-pdf' ></i>";
break;
case "xls":
case "xlsx":
str = "<i class='fa fa-file-excel-o file-excel' ></i>";
break;
case "doc":
case "docx":
str = "<i class='fa fa-file-word-o file-word' ></i>";
break;
default:
str = "<i class='fa fa-file-file-o file-empty' ></i>";
break;
}
return str;
}
}
});
I'm relatively new to Vue, so any guidance with code snippets would be greatly appreciated.