將標題重寫為：將一個項目設為true，其他所有項目設為false的VueJS響應式元素

Question

我正在使用VueJS的組合API開發一個應用程式。 我已經設定了一個響應式元素，如下所示

const sections = reactive({
  section1: true,
  section2: false,
  section3: false,
  section4: false,
  section5: false,
  section6: false
})

當頁面上的每個按鈕都點擊時，我想根據它們的布林值顯示和隱藏各個元素（以及其他許多操作）。 我可以為每個按鈕編寫一個函數，並按照您在這段程式碼中看到的方式單獨設定所有內容

const section1Button= () => {
  sections.section1 = true,
  sections.section2 = false,
  sections.section3 = false,
  sections.section4 = false,
  sections.section5 = false,
  sections.section6 = false
}
const section2Button= () => {
  sections.section1 = false,
  sections.section2 = true,
  sections.section3 = false,
  sections.section4 = false,
  sections.section5 = false,
  sections.section6 = false
}

這絕對有效，但這意味著我必須寫多個函數，實際上只有一個變化。 有沒有更有效率的方法來完成這個任務？ 我覺得我應該能夠用循環或if語句來做到這一點，但我就是想不起來。 這是我在stackoverflow上的第一篇帖子，如果我沒有提供足夠的細節，請告訴我。

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;
  });
}

希望對你有幫助！