title: Vuejs sorting a list
body: <p>Do someone know how to sort this data? <br /></p>
  <p>I want to sort using 2 options! <br /> <br />
  Type to be: select input <br />
  Priority to be: 3 check radio like( 0 = Normal, 1 = Important, 2 = Urgent)</p>
  <p>For example when i select from type input value 2 and from priority check radio 1 then all list from type 2 and with priority 1 to be in front.</p>
  <p>Hope i explain right.</p>
  <pre><code>Lists: [
      { id: 1, priority: 1, type: 0, title: 'Whatever 1' },
      { id: 2, priority: 2, type: 3, title: 'I love cards' },
      { id: 3, priority: 0, type: 5, title: 'Movie start' },
      { id: 4, priority: 2, type: 1, title: 'Computer data' },
      { id: 5, priority: 0, type: 2, title: 'Phone style' },
      { id: 6, priority: 1, type: 5, title: 'Email received' },
  ],
  </code></pre>
  <p>And here is the code:</p>
  <pre><code>    &lt;div&gt;
      &lt;!-- Start filters --&gt;
      &lt;div style=&quot;padding: 20px;&quot;&gt;
          &lt;h1&gt;Filters&lt;/h1&gt;
          Search: &lt;input v-model=&quot;filterText&quot; style=&quot;border: 1px solid;&quot; /&gt;
          &lt;v-col cols=&quot;3&quot;&gt;
              &lt;v-select
                  v-model=&quot;type&quot;
                  :items=&quot;typeItems&quot;
                  item-value=&quot;id&quot;
                  item-text=&quot;name&quot;
                  label=&quot;Type&quot;
              /&gt;
          &lt;/v-col&gt;
          &lt;v-col cols=&quot;12&quot; class=&quot;pt-1&quot;&gt;
              &lt;v-radio-group label=&quot;Priority&quot; row dense v-model=&quot;priority&quot; class=&quot;d-inline-block mt-0&quot;&gt;
                  &lt;v-radio class=&quot;d-inline-block&quot; color=&quot;orange&quot; label=&quot;Normal&quot; :value=&quot;0&quot;&gt;&lt;/v-radio&gt;
                  &lt;v-radio class=&quot;d-inline-block&quot; color=&quot;green&quot; label=&quot;Important&quot; :value=&quot;1&quot;&gt;&lt;/v-radio&gt;
                  &lt;v-radio class=&quot;d-inline-block&quot; color=&quot;red&quot; label=&quot;Urgent&quot; :value=&quot;2&quot;&gt;&lt;/v-radio&gt;
              &lt;/v-radio-group&gt;
          &lt;/v-col&gt;
      &lt;/div&gt;
      &lt;!-- End filters --&gt;
  
      &lt;!-- Start list --&gt;
      &lt;div v-for=&quot;(list, index) in ListFiltered&quot; :key=&quot;list.id&quot; :index=&quot;index&quot;&gt;
          &lt;div style=&quot;float: left; border: 1px solid; margin: 10px; padding: 10px;&quot; :class=&quot;list.priority === 0 ? 'orange' : list.priority === 1 ? 'green' : 'red'&quot;&gt;
              List id #{{ list.id }} &lt;br /&gt;
              Priority: {{ list.priority }} &lt;br /&gt;
              Type: {{ list.type }} &lt;br /&gt;
              Title: {{ list.title }}
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- End list --&gt;
  &lt;/div&gt;
  
      data() {
      return {
          Lists: [
              { id: 1, priority: 1, type: 0, title: 'Whatever 1' },
              { id: 2, priority: 2, type: 3, title: 'I love cards' },
              { id: 3, priority: 0, type: 5, title: 'Movie start' },
              { id: 4, priority: 2, type: 1, title: 'Computer data' },
              { id: 5, priority: 0, type: 2, title: 'Phone style' },
              { id: 6, priority: 1, type: 5, title: 'Email received' },
          ],
  
          // Search filter
          filterText: '',
  
          // Type filter
          type: 0,
          typeItems: [
              { id: 0, name: &quot;All&quot; },
              { id: 2, name: &quot;Home&quot; },
              { id: 3, name: &quot;Office&quot; },
              { id: 4, name: &quot;Computers&quot; },
              { id: 5, name: &quot;Movies&quot; },
          ],
  
          // Priority filter
          priority: 0
      }
  },
  computed: {
      ListFiltered() {
          let filter = new RegExp(this.filterText, 'i')
          return this.Lists.filter(el =&gt; el.title.match(filter))
      }
  }
  </code></pre>
  <p>}</p>