Comment puis-je ajouter 2 nouvelles propriétés à l'intérieur du tableau d'objets? Ces 2 propriétés doivent être ajoutées pour chaque objet à l'intérieur du tableau. Voici la fonction:
<b-dropdown aria-role="list">
<b-button
icon-right="caret-down"
class="ToolbarButton"
size="is-small"
>
<span> {{ selectedProduct.tagTitle }} </span>
</b-button>
<b-dropdownitem
v-for="selectedTag in selectedProduct.tags"
:key="selectedTag.id"
aria-role="listitem"
@click="selectTag(selectedProduct, selectedTag)"
>
{{ selectedTag.title }}
</b-dropdownItem>
dropdown
selectTag(selectedProduct, selectedTag) {
this.selectedProducts.filter(item => {
item.id === selectedProduct.id
})
.map(item => {
item.tagId=selectedTag.id, item.tagTitle = selectedTag.title
})
},
J'ai essayé la fonction ci-dessus mais cela n'a pas fonctionné. la méthode de la carte doit être corrigée. J'essaie d'ajouter des propriétés tagId et tagTitle qui obtiendront de la valeur à partir de la sélection déroulante pour chaque ligne de produit ... Comment cela peut-il être corrigé?
7 Réponses :
La fonction de carte est en effet fausse, vous ne renvoyez rien, cela devrait être comme ceci:
.map(item => {
return {
...item,
tagId: selectedTag.id,
tagTitle: selectedTag.title
}
})
ou
.map(item => ({
...item,
tagId: selectedTag.id,
tagTitle: selectedTag.title
}))
p >
cela ne renverra qu'un tableau avec ces deux propriétés, devra ajouter ... item également à l'intérieur de cet objet pour renvoyer l'objet complet
Ouais, totalement oublié
Ouais bien, tu l'as mis à jour comme une seconde après avoir écrit le commentaire haha
Le but est de faire muter les produits sélectionnés. Ce code ne créera-t-il pas un nouveau tableau, mais laissera-t-il selectedProducts inchangé?
Utilisez .map avec la syntaxe de répartition d'objets.
.map(item => ({
...item,
item.tagId: selectedTag.id, item.tagTitle: selectedTag.title
}))
Essayez ceci
var arr =[
{id: 1, turnName: "10_00_am"},
{id: 2, turnName: "10_00_am"},
{id: 3, turnName: "11_00_am"}
];
const addProps = (x) => {
x.prop1 = 'Alaska';
x.prop2 = 'Canada';
return x;
}
var newArr = arr.map(x => addProps(x));
console.log(newArr);
Vous pouvez utiliser la syntaxe de propagation d'objets ES6 pour renvoyer un nouvel élément mis à jour à partir de la fonction de carte. De plus, les propriétés de l'objet peuvent être déstructurées dans les paramètres de la fonction elle-même pour lui donner un aspect concis et soigné.
selectTag(({id}), ({id: tagId, title: tagTitle})) {
this.selectedProducts.filter(item => item.id === id)
.map(item => ({...item, tagId, tagTitle}))
}
Veuillez ajouter une extension à votre réponse pour une valeur à long terme et pour que les futurs visiteurs puissent en tirer des leçons. Les réponses de code uniquement sont moins susceptibles d'être des votes positifs car elles ne sont ni utiles ni conviviales.
À partir de la fonction que vous montrez, faites remarquer que le filtre doit stocker son résultat dans une variable, car le filtre ne mute pas le tableau dans lequel il est exécuté. le mappage ne fonctionne pas car vous devez copier l'objet puis étendre les nouvelles propriétés
Si j'ai bien compris votre question, veuillez essayer l'exemple suivant
const object = {
selectTag(selectedProduct, selectedTag) {
const data = this.selectedProducts.filter((item) => {
item.id === selectedProduct.id;
});
return data.map((entry) => ({
...entry,
tagId: selectedTag.id,
tagTitle: selectedTag.title,
}));
},
};
vous pouvez boucler sur l'objet et ajouter vos propriétés:
for(let obj of array) {
obj[key1] = value1;
obj[key2] = value2;
}
Si c'est dans Vue.js, vous ne pouvez pas ajouter de propriétés à un objet de manière conventionnelle, car il ne sera pas réactif. Vous devez utiliser Vue.set:
selectTag: function(selectedProduct, selectedTag) {
for (var i = 0; i < this.selectedProducts.length; i++) {
if (this.selectedProducts[i].id === selectedProduct.id) {
this.$set(this.selectedProducts[i], "tagId", selectedTag.id);
this.$set(this.selectedProducts[i], "tagTitle", selectedTag.title);
}
}
}
Pouvez-vous s'il vous plaît modifier votre réponse en fonction de l'ensemble du code de ma question? Je vérifie d'abord mon identité pour le produit sélectionné, puis après cette valeur ajoutée
Il indique que la vue n'est pas définie et que tagId n'est pas défini, tagTitle n'est pas défini
J'ai manqué une citation. S'il te plaît, essaye maintenant. Voir également ici: vuejs.org/v2/guide/reactivity.html
Si je comprends bien le problème, je pense que cela devrait fonctionner maintenant. L'hypothèse est que selectedProducts est défini dans le composant avec la méthode selectTag.
'ai mis à jour ma question avec la partie déroulante où elle est utilisée. Et ça ne marche toujours pas. Pouvez-vous s'il vous plaît vérifier la partie déroulante de la question pour mieux comprendre le problème? La partie du filtre fonctionne correctement Le journal de la console affiche les bons identifiants mais la deuxième partie ne fonctionne pas à l'intérieur pour chacun
Je sais que c'est moche, mais cela a fonctionné dans ma maquette. Veuillez voir si vous réussissez.
Cela semble fixe. Merci beaucoup.
Pouvez-vous s'il vous plaît aider avec cette question, il manque un cas pour la même liste déroulante? Voici le lien. stackoverflow.com/questions/63119797/...
voir ce post stackoverflow.com/ questions / 38922998 /…