Comment afficher un seul bouton pour chaque date distincte?
Puis-je utiliser deux boucles v-for? comment sélectionner des valeurs distinctes dans ma boucle?
allQuestions : []
question : {'id' : '123' , 'date' : '25'}
<div v-for="question in allQuestions" >
<button v-for="date in question.date">
{{date}}
</button>
</div>
3 Réponses :
Vous pouvez utiliser computed pour afficher un tableau de toutes vos questions triées par date.
une autre solution?
Vous pouvez utiliser Set :
L'objet Set vous permet de stocker des valeurs uniques de tout type, qu'il s'agisse de valeurs primitives ou de références d'objet.
Exemple de MDN:
const numbers = [2, 3, 4, 4, 2, 3, 3, 4, 4, 5, 5, 6, 6, 7, 5, 32, 3, 4, 5] console.log([...new Set(numbers)])
Modifiez-le simplement selon vos besoins.
Cela ne fonctionnera pas car les objets du tableau allQuestions d'OP ne sont pas uniques
@Frank et bien, on ne sait pas vraiment ce que l'OP veut vraiment car le titre est "Vuejs - Comment obtenir toutes les valeurs uniques dans un tableau (supprimer les doublons) en utilisant v-for" où Set fonctionne très bien.
Alors, comment utiliseriez-vous Set pour obtenir tous les objets dans un tableau où toutes les valeurs d'une certaine propriété de chaque objet sont uniques. Je suis honnêtement intéressé.
@Frank pouvez-vous être plus précis? "où toutes les valeurs d'une certaine propriété de chaque objet sont uniques" - n'est-il pas nécessaire de trouver les uniques, pas toutes? Veuillez également créer un violon pour le test.
C'est exactement la même question que celle posée par OP, compte tenu du type de données qu'il a inclus. Je vais faire un violon
@Frank désolé pour la réponse tardive. J'ai mal compris l'OP, donc oui, vous avez raison - avec seulement Set je doute que ce soit possible. Cependant, vous pouvez utiliser un réducteur, un filtre, une carte, ... pour obtenir ce que l'OP souhaite.
Utilisez réduisez à exécuter une fonction réducteur sur chaque élément du tableau, puis fusionner les correspondances individuelles dans l'objet existant avec assign . Ce processus de fusion prend soin de supprimer (ou de remplacer réellement) les éléments en double.
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div v-for="question in uniqueQuestions" :key="question.date">
<button v-for="date in question.date">
{{date}}
</button>
</div>
</div>
const vm = new Vue({
el: '#app',
data() {
return {
allQuestions: [
{ id: '123', date: '14' },
{ id: '456', date: '2' },
{ id: '933', date: '2' },
{ id: '789', date: '7' },
{ id: '220', date: '14' }
]}
},
computed: {
uniqueQuestions() {
return this.allQuestions.reduce((seed, current) => {
return Object.assign(seed, {
[current.date]: current
});
}, {});
}
}
});
Bien que je ne sois pas très sûr de savoir comment vous vouliez que le format de question.date soit comme. Dans votre exemple, vous l'aviez sous forme de chaîne, mais je ne comprends pas pourquoi vous v-for les dates individuelles sous forme de char?
oui, vous pouvez utiliser deux boucles comme vous l'avez fait, mais votre objet doit être à l'intérieur de votre tableau dans le tableau. comme:
allQuestions: [question: {'id': '123', [{'date': '25'}, {'date': '25'}, {'date': '27'}] },]@Najamussaqib valeurs distinctes
vous pouvez sélectionner ou lier la valeur de cette manière.
@Najamussaqib ne fonctionne pas. car les données n'ont pas d'attribut id.
c'est parce que votre tableau
allQuestionsne contient rien. placez votre objetquestiondans votre tableauallQuestion.vos données doivent ressembler à ceci:
allQuestions = [{question: [{'id': '1', 'date': '25'}, {'id': '2', 'date': ' 26 '}, {' id ':' 3 ',' date ':' 27 '}]}]