title: Vue click event on multiple td elements exception on first and last
body: <p>I want to use a <strong>click event</strong> in my table to go to the <strong>detailpage</strong> of the clicked row with the <strong>exception</strong> on the <strong>first and last td element</strong>.</p>
  
  <p><strong>Example:</strong></p>
  
  <pre><code>&lt;tr v-for="(row, key) in $rows" :key="row.id"&gt;
    &lt;td&gt;*Input checkbox*&lt;/td&gt;
    &lt;td&gt;{{ row.user.type }}&lt;/td&gt;
    &lt;td&gt;{{ date | moment('MMMM') }}&lt;/td&gt;
    &lt;td&gt;{{ row.customer.name }}&lt;/td&gt;
    &lt;td&gt;{{ row.user.name }}&lt;/td&gt;
    &lt;td&gt;{{ row.total }}&lt;/td&gt;
    &lt;td&gt;*Icon to archive*&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>What I can't use because of exception on first and last element:</p>
  
  <pre><code>&lt;tr @click="detailPage(row.user.id)" v-for="(row, key) in $rows" :key="row.id"&gt;
  </code></pre>
  
  <p>What I don't want to use because of repeating code:</p>
  
  <pre><code>&lt;tr v-for="(row, key) in $rows" :key="row.id"&gt;
    &lt;td&gt;*Input checkbox*&lt;/td&gt;
    &lt;td @click="detailPage(row.user.id)"&gt;{{ row.user.type }}&lt;/td&gt;
    &lt;td @click="detailPage(row.user.id)"&gt;{{ date | moment('MMMM') }}&lt;/td&gt;
    &lt;td @click="detailPage(row.user.id)"&gt;{{ row.customer.name }}&lt;/td&gt;
    &lt;td @click="detailPage(row.user.id)"&gt;{{ row.user.name }}&lt;/td&gt;
    &lt;td @click="detailPage(row.user.id)"&gt;{{ row.total }}&lt;/td&gt;
    &lt;td&gt;*Icon to archive*&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>What I tried but didn't trigger the click event:</p>
  
  <pre><code>&lt;tr v-for="(row, key) in $rows" :key="row.id"&gt;
    &lt;td&gt;*Input checkbox*&lt;/td&gt;
    &lt;template @click="detailPage(row.user.id)"&gt;
      &lt;td&gt;{{ row.user.type }}&lt;/td&gt;
      &lt;td&gt;{{ date | moment('MMMM') }}&lt;/td&gt;
      &lt;td&gt;{{ row.customer.name }}&lt;/td&gt;
      &lt;td&gt;{{ row.user.name }}&lt;/td&gt;
      &lt;td&gt;{{ row.total }}&lt;/td&gt;
      &lt;td&gt;*Icon to archive*&lt;/td&gt;
    &lt;/template&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>How I could solve with JQuery:</p>
  
  <pre><code>$('table#tbl &gt; tbody &gt; tr &gt; td').not(':first').not(':last').click(function() {
    // detailpage
  })
  </code></pre>
  
  <p><strong>Method from click event</strong></p>
  
  <pre><code>methods: {
    detailPage (id) {
      this.$router.push({path: `/timesheets/view/${id}`})
    },
  </code></pre>
  
  <p>Is there a right way in Vue without repeating code?</p>