Schreiben Sie den Titel um in: VueJS responsives Element, wobei ein Element auf „true“ und alle anderen auf „false“ gesetzt sind

Question

Ich entwickle eine Anwendung mit der Kompositions-API von VueJS. Ich habe ein responsives Element wie unten gezeigt eingerichtet

const section = reactive({
  Abschnitt 1: wahr,
  Abschnitt 2: falsch,
  Abschnitt 3: falsch,
  Abschnitt 4: falsch,
  Abschnitt 5: falsch,
  Abschnitt 6: falsch
})

Wenn auf jede Schaltfläche auf der Seite geklickt wird, möchte ich die einzelnen Elemente (neben vielen anderen Vorgängen) basierend auf ihren booleschen Werten ein- und ausblenden. Ich könnte für jede Schaltfläche eine Funktion schreiben, die alles individuell einrichtet, wie Sie in diesem Code sehen

const section1Button= () =>
  Abschnitte.Abschnitt1 = wahr,
  Abschnitte.Abschnitt2 = falsch,
  Abschnitte.Abschnitt3 = falsch,
  Abschnitte.Abschnitt4 = falsch,
  Abschnitte.Abschnitt5 = falsch,
  Abschnitte.Abschnitt6 = falsch
}
const section2Button= () =>
  Abschnitte.Abschnitt1 = falsch,
  Abschnitte.Abschnitt2 = wahr,
  Abschnitte.Abschnitt3 = falsch,
  Abschnitte.Abschnitt4 = falsch,
  Abschnitte.Abschnitt5 = falsch,
  Abschnitte.Abschnitt6 = falsch
}

Das funktioniert definitiv, aber es bedeutet, dass ich mehrere Funktionen mit wirklich nur einer Änderung schreiben muss. Gibt es eine effizientere Möglichkeit, diese Aufgabe zu erfüllen? Ich habe das Gefühl, dass ich das mit einer Schleife oder einer if-Anweisung machen sollte, aber mir fällt einfach nichts ein. Dies ist mein erster Beitrag zu Stackoverflow. Bitte lassen Sie mich wissen, wenn ich nicht genügend Details angegeben habe.

Answer 1

你可以尝试像这样使用Array.prototype.reduce和Object.entries来循环遍历sections的键/值对，并根据需要设置true/false，从而创建一个新的sections对象：

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')"

如果你发现需要直接修改属性，你可以使用Array.prototype.forEach：

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

希望对你有所帮助！