title: vue js 2 sorting a table
body: <p>I have 2 questions with vue.js 2 and a fiddle here: <a href="https://jsfiddle.net/tmun9cxa/1/" rel="nofollow noreferrer">https://jsfiddle.net/tmun9cxa/1/</a></p>
  
  <ol>
  <li><p>When you click a column header, why does my sorting not work? What is the solution?</p></li>
  <li><p>How do I go about making the search input field search only the pn column?</p></li>
  </ol>
  
  <p>A lot of the examples ive found are using vue1 and out of date.</p>
  
  <p></p>
  
  <pre><code>&lt;input type="text" value="" v-model="search" placeholder="Search"&gt;
  
  &lt;table style="text-align: center;"&gt;
      &lt;thead&gt;
          &lt;tr&gt;
              &lt;th v-for="column in columns"&gt;
                  &lt;a 
                      href="#"
                      v-on:click="sort(column.shortcode)"&gt;{{column.label}}
                  &lt;/a&gt;
              &lt;/th&gt;
          &lt;/tr&gt;
      &lt;/thead&gt;
      &lt;tbody&gt;
          &lt;tr v-for="(product) in products"&gt;
              &lt;td&gt;{{product.pn}}&lt;/td&gt;
              &lt;td&gt;{{product.od}}&lt;/td&gt;
              &lt;td&gt;{{product.id}}&lt;/td&gt;
              &lt;td&gt;{{product.thickness}}&lt;/td&gt;
              &lt;td&gt;{{product.lo}}&lt;/td&gt;
              &lt;td&gt;{{product.weight}}&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p></p>
  
  <p>javascript here</p>
  
  <pre><code>var vm = new Vue({
          el: '#app',
          data: {
              currentSort: 'pn',
              currentSortDir: 'asc',
              search: '',
              columns: [
                  { label: 'P/N', shortcode: 'pn' },
                  { label: 'OD (De,mm)', shortcode: 'od' },
                  { label: 'ID (De,mm)', shortcode: 'id' },
                  { label: 'Thickness (De,mm)', shortcode: 'thickness' },
                  { label: 'LO', shortcode: 'lo' },
                  { label: 'Weight (kg/1000)', shortcode: 'weight' },
              ], // columns
              products: [
                  { 
                      pn: 170158,
                      od: 13,
                      id: .44,
                      thickness: 1,
                      lo: .45,
                      weight: .7
                  },{ 
                      pn: 1803561,
                      od: 12,
                      id: .8,
                      thickness: .7,
                      lo: .11,
                      weight: .5
                  },{ 
                      pn: 170149,
                      od: 9,
                      id: .64,
                      thickness: .6,
                      lo: .75,
                      weight: .3
                  },{ 
                      pn: 150149,
                      od: 15,
                      id: .22,
                      thickness: .3,
                      lo: .55,
                      weight: .9
                  },
              ], // products
          },
          methods: {
              sort:function(col) {
                  //console.log( 'current: '+this.currentSort );
                  //console.log( 'col: '+col );
                  //var colthing = col;
  
                  // if you click the same label twice
                  if(this.currentSort == col){
                      console.log( 'same col: '+col );
                      // sort by asc
                      this.products = this.products.sort((a, b) =&gt; {
                          return a.col &gt;= b.col;
                      });
                  }else{
                      this.currentSort = col;
                      console.log( 'diff col: '+col );
                      // sort by desc
                      this.products = this.products.sort((a, b) =&gt; {
                          return a.col &lt;= b.col;
                      });
                  } // end if
  
              }, // sort
  
          }, // methods
      }); // vue
  </code></pre>