J'essaie de créer une liste générée dynamiquement (avec les données d'une API), puis de rendre les éléments de la liste cliquables pour sélectionner ces éléments.
Le problème est que dans cette version, les cases à cocher fonctionnent correctement, mais le il est impossible de cliquer sur les lignes pour les vérifier.
Modèle:
new Vue({
el: "#app",
data: () => ({
selected: [],
colors: [
{ hex: "#f00", label: "Red" },
{ hex: "#0f0", label: "Green" },
{ hex: "#00f", label: "Blue" }
]
})
});
JavaScript:
<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>
Codepen pour jouer avec: https://codepen.io/anon/pen/vvqeLz
Comparé à l'exemple donné, il n'y a pas de variable fixe que je puisse pré-créer pour cocher une case comme étant sélectionnée, et j'ai besoin des données dans un tableau (comme cela se passe correctement maintenant) pour traiter cela plus tard. Notez que l'exemple est simplifié au strict minimum. (à l'exclusion des accessoires et ainsi de suite)
Quelqu'un a-t-il une idée géniale sur la façon de rendre les éléments de la liste cliquables pour cocher les cases correctement?
3 Réponses :
computed: {
selected: function() {
return this.colors.filter(color => color.selected)
}
}
Vous apporte chaque sélection couleurs comme un tableau.
Cette solution vous offre 2 avantages par rapport à la vôtre. Vous pouvez prédéfinir ce qui doit être vérifié avant même qu'il ne soit cliqué une fois, et vous pouvez également facilement implémenter une manipulation de la valeur cliquée du tableau en dehors de la case à cocher elle-même.
Si vous cliquez sur une case de sélection, elle n'est pas ajoutée / supprimée immédiatement, vous devez cliquer deux fois
@ T.Dirks Problème intéressant: o
De plus, l'élément présélectionné n'est pas coché mais présent dans la liste sélectionnée (╯ ° □ °） ╯︵ ┻━┻
L'exemple de Codepen a fière allure! Merci
processColorClick(color) {
let idx = this.selected.indexOf(color);
if (idx === -1) {
this.selected.push(color);
}
else {
this.selected.splice(idx, 1);
}
}
@Badgy, mutation des données d'origine - est mauvais. La méthode est meilleure.
UPD: encore une solution
Fonctionne également mais vous n’avez pas l’avantage de prérégler les valeurs (vrai | faux)
mutation des données - est une très mauvaise pratique.
Fonctionne parfaitement et bien, mais je vais avec la réponse @ t-dirsk car elle est un peu plus sûre et complète. Pourtant, merci beaucoup pour l'aide: D
Voici ma tentative, voir l ' exemple Codepen
Ce que j'ai fait était créer une méthode qui bascule l'ajout et la suppression d'une couleur dans le tableau. Ensuite, j'ai ajouté la fonctionnalité de clic pour la ligne elle-même avec @click.capture.stop="toggleColor(color)".
Le .capture.stop code > part vérifie si un utilisateur a cliqué sur une boîte de sélection en premier, et si c'est le cas, il arrête la méthode de se déclencher à nouveau. Sinon, une fois que vous avez cliqué sur une case de sélection, la case de sélection et la ligne font basculer la valeur, s'annulant ainsi l'une l'autre
methods: {
toggleColor (color) {
if (this.selected.includes(color)) {
// Removing the color
this.selected.splice(this.selected.indexOf(color), 1);
} else {
// Adding the color
this.selected.push(color);
}
}
}
@HoffZ dans votre lien codepen, cela ne fonctionne que lorsque vous cliquez directement sur la case à cocher. OP voulait que cela fonctionne lorsque vous cliquez quelque part sur la totalité de l'élément de la tuile de la liste, c'est pourquoi la méthode et le gestionnaire @click étaient nécessaires