WafelT
@WafelT
HTML/CSS/JavaScript

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

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

6140ba18bbf4f432447525.jpeg

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

Как такую конструкцию написать в 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>
  }
}
  • Вопрос задан
  • 68 просмотров
Решения вопроса 1
bootd
@bootd
Гугли и ты откроешь врата знаний!
<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
  };
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы