title: In Vuetify, how can I make a dynamically list with checkboxes clickable to select them?
body: <p>I'm trying to create a dynamically generated list (with data from an API), then make the list items clickable to select these items.</p>
  
  <p>The problem is that in this version, the checkboxes work properly, however the rows cannot be clicked to check them.</p>
  
  <p>Template:</p>
  
  <pre><code>&lt;div id="app"&gt;
    &lt;v-app&gt;
      &lt;v-list dark&gt;
        &lt;v-list-tile v-for="(color) in colors" :key="color.hex" @click=""&gt;
          &lt;v-list-tile-action&gt;
            &lt;v-checkbox v-model="selected" multiple :value="color" /&gt;
          &lt;/v-list-tile-action&gt;
          &lt;v-list-tile-content @click=""&gt;
            &lt;v-list-tile-title&gt;{{ color.label }}&lt;/v-list-tile-title&gt;
          &lt;/v-list-tile-content&gt;
        &lt;/v-list-tile&gt;
      &lt;/v-list&gt;
      &lt;p&gt;Selected items:&lt;/p&gt;
      &lt;pre&gt;{{ selected }}&lt;/pre&gt;
    &lt;/v-app&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>new Vue({
    el: "#app",
    data: () =&gt; ({
      selected: [],
      colors: [
        { hex: "#f00", label: "Red" },
        { hex: "#0f0", label: "Green" },
        { hex: "#00f", label: "Blue" }
      ]
    })
  });
  </code></pre>
  
  <p>Codepen to play around with it: <a href="https://codepen.io/anon/pen/vvqeLz" rel="nofollow noreferrer">https://codepen.io/anon/pen/vvqeLz</a></p>
  
  <p>Compared to the given example, there's no fixed variable I can pre-create to mark a checkbox as selected, and I need the data in one array (as is correctly happening now) to process this later on. Note that the example is simplified to the bare-bone minimum. (excluding props and so forth)</p>
  
  <p>Does anyone have a genius idea on how to make the list items clickable to check the boxes properly?</p>