I'm currently working on a project that involves creating a list dynamically populated with data from an API. The goal is to have clickable list items that can be selected.
However, I've run into an issue where the checkboxes are functioning correctly, but clicking on the rows themselves does not check them off.
This is the template I am using:
<div id="app">
<v-app>
<v-list dark>
<v-list-tile v-for="(color) in colors" :key="color.hex" @click="">
<v-list-tile-action>
<v-checkbox v-model="selected" multiple :value="color" />
</v-list-tile-action>
<v-list-tile-content @click="">
<v-list-tile-title>{{ color.label }}</v-list-tile-title>
</v-list-tile-content>
</v-list-tile>
</v-list>
<p>Selected items:</p>
<pre>{{ selected }}</pre>
</v-app>
</div>
Here is the JavaScript code being used:
new Vue({
el: "#app",
data: () => ({
selected: [],
colors: [
{ hex: "#f00", label: "Red" },
{ hex: "#0f0", label: "Green" },
{ hex: "#00f", label: "Blue" }
]
})
});
If you'd like to experiment with the code, you can access it on Codepen by following this link: https://codepen.io/anon/pen/vvqeLz
I am looking for suggestions on how to address the challenge of making the list items clickable to properly check the boxes without having to pre-create a fixed variable or modify the structure of the array containing the data. Any innovative ideas are welcome!