Как использовать switch case в vue?

Question

[Дмитрий]

Есть структура папок, и хотелось чтобы в зависимости от типа файла, менялось иконка с помощю конструкций switch case в vue js:



В конструкций switch case я буду использовать поле type, которое есть у каждого файла:


Как такую конструкцию написать в vue.js 3.0:

switch(type) {
  case "image/svg": {
    return <i class="fas file-icon fa-image"></i>
  }
  case "image/jpeg": {
    return <i class="fas file-icon fa-image"></i>
  }
  case "image/jpg": {
    return <i class="fas file-icon fa-image"></i>
  }
}

Answer 1

[Дима Паутов]

<template>
    <i :class="getIconNameByType(type)"/>
  </template>

setup () {
  function getIconNameByType (type) {
    const iconsMap = {
      'image/svg': 'fas file-icon fa-image',
      'image/jpeg': 'fas file-icon fa-image',
      'image/jpg': 'fas file-icon fa-image',
      'text/javascript': 'fas file-icon fa-image',
      // ....
    };

    return iconsMap[type];
  }

  return {
    getIconNameByType
  };
}

Comments

[Дмитрий]

Спасибо большое!