title: How to create a Vue method that dynamically chooses an icon from a list for a corresponding extension?
body: <p>I'm trying to display a proper icon depending on what type of file it is.</p>
  
  <p>I have this <code>div</code> that displays either:</p>
  
  <ul>
  <li><p>an image</p></li>
  <li><p>or a <code>&lt;v-icon&gt;</code> component (where <code>{{ext.value}}</code> is the icon name to display)</p></li>
  </ul>
  
  <h3>div</h3>
  
  <pre><code>&lt;div&gt;
    &lt;img v-if="isImg(props.item.path)" :src="props.item.path"&gt;
    &lt;v-icon v-else v-for="ext in extensionsList" :key="ext.id"&gt;
      {{ext.value}}   &lt;=== should put a corresponding value if matches any extension
    &lt;/v-icon&gt;
  &lt;/div&gt;
  </code></pre>
  
  <h3>data</h3>
  
  <pre><code>data () {
    return {
      extensionsList: [
        {value: "generic_icon", extension: ['.ini', '.dll']},
        {value: "code_icon", extension: ['.json', '.py']},
        {value: "text_icon", extension: '.txt'}
      ]
    }
  }
  </code></pre>
  
  <p>I can get a file extension by using this method:</p>
  
  <pre><code>getExtension (value) {
    return path.extname(value)
  }
  </code></pre>
  
  <p><code>props.item</code> is an object containing file properties so I pass that as the input  into <code>path.extname()</code> and it returns something like:  <code>'.ini'</code>, or <code>'.jpg'</code></p>
  
  <hr>
  
  <ul>
  <li><p>How do I make this work? I don't know how to call a method when <code>v-else</code> branch is true, do I use a method, a computed property? </p></li>
  <li><p>And how to make sure it uses a generic file icon <code>value: "generic_icon"</code> (the <code>[0]</code> in the <code>extensionsList</code>) for all extensions that do not match any item in the list?</p></li>
  </ul>