<p>I am developing an application using VueJS's composition API. I've set up a responsive element as shown below</p> <pre class="brush:php;toolbar:false;">const sections = reactive({ section1: true, section2: false, section3: false, section4: false, section5: false, section6: false })</pre> <p>When each button on the page is clicked, I want to show and hide the individual elements (among many other operations) based on their boolean values. I could write a function for each button that sets everything up individually as you see in this code</p> <pre class="brush:php;toolbar: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 }</pre> <p>This definitely works, but it means I have to write multiple functions with really only one change. Is there a more efficient way to accomplish this task? I feel like I should be able to do this with a loop or an if statement, but I just can't think of it. This is my first post on stackoverflow, please let me know if I haven't provided enough details. </p>

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

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