Réécrivez le titre en : élément réactif VueJS avec un élément défini sur true et tous les autres définis sur false

Question

Je développe une application utilisant l'API de composition de VueJS. J'ai configuré un élément réactif comme indiqué ci-dessous

const sections = réactif({
  section1 : vrai,
  section2 : faux,
  section3 : faux,
  section4 : faux,
  section5 : faux,
  section6 : faux
})
Lorsque l'on clique sur chaque bouton de la page, je souhaite afficher et masquer les éléments individuels (parmi de nombreuses autres opérations) en fonction de leurs valeurs booléennes.
Je pourrais écrire une fonction pour chaque bouton qui configure tout individuellement comme vous le voyez dans ce code
const section1Button= () =>
  sections.section1 = vrai,
  sections.section2 = faux,
  sections.section3 = faux,
  sections.section4 = faux,
  sections.section5 = faux,
  sections.section6 = faux
}
const section2Button= () =>
  sections.section1 = faux,
  sections.section2 = vrai,
  sections.section3 = faux,
  sections.section4 = faux,
  sections.section5 = faux,
  sections.section6 = faux
}
Cela fonctionne certainement, mais cela signifie que je dois écrire plusieurs fonctions avec un seul changement.
Existe-t-il un moyen plus efficace d’accomplir cette tâche ?
J'ai l'impression que je devrais pouvoir le faire avec une boucle ou une instruction if, mais je n'y pense tout simplement pas.
Ceci est mon premier article sur stackoverflow, merci de me faire savoir si je n'ai pas fourni suffisamment de détails. 
            

Answer 1

Vous pouvez essayer d'utiliser Array.prototype.reduce和Object.entries来循环遍历sections的键/值对，并根据需要设置true/false，从而创建一个新的sectionsobject comme ceci :

const updateSections = (section) => {
  sections = Object.entries(sections).reduce((acc, [key, value]) => {
    // 如果键与选定的section匹配，设置为true
    if (key === section) return { ...acc, [key]: true };
    // 否则设置为false
    return { ...acc, [key]: false };
  }, {});
}

// 以你想要的方式触发updateSections来更新特定的section
v-on:click="updateSections('section1')"

Si vous constatez que vous devez modifier directement les propriétés, vous pouvez utiliser Array.prototype.forEach :

const updateSections = (section) => {
  Object.keys(sections).forEach(key => {
    // 如果键与选定的section匹配，设置为true
    if (key === section) sections[key] = true;
    // 否则设置为false
    sections[key] = false;
  });
}

J'espère que cela aide !