Tulis semula tajuk kepada: Elemen responsif VueJS dengan satu item ditetapkan kepada benar dan semua yang lain ditetapkan kepada palsu

Question

Saya sedang membangunkan aplikasi menggunakan API komposisi VueJS. Saya telah menyediakan elemen responsif seperti yang ditunjukkan di bawah

bahagian const = reaktif({
  bahagian 1: benar,
  bahagian 2: palsu,
  bahagian 3: palsu,
  bahagian 4: palsu,
  bahagian 5: palsu,
  bahagian 6: palsu
})

Apabila setiap butang pada halaman diklik, saya ingin menunjukkan dan menyembunyikan elemen individu (antara banyak operasi lain) berdasarkan nilai boolean mereka. Saya boleh menulis fungsi untuk setiap butang yang menetapkan semuanya secara individu seperti yang anda lihat dalam kod ini

const section1Button= () =>
  sections.section1 = benar,
  sections.section2 = palsu,
  sections.section3 = palsu,
  sections.section4 = palsu,
  sections.section5 = palsu,
  bahagian.bahagian6 = palsu
}
bahagian const2Button= () =>
  sections.section1 = palsu,
  sections.section2 = benar,
  sections.section3 = palsu,
  sections.section4 = palsu,
  sections.section5 = palsu,
  bahagian.bahagian6 = palsu
}

Ini pasti berkesan, tetapi ini bermakna saya perlu menulis berbilang fungsi dengan hanya satu perubahan. Adakah terdapat cara yang lebih cekap untuk menyelesaikan tugas ini? Saya rasa saya sepatutnya boleh melakukan ini dengan gelung atau pernyataan if, tetapi saya tidak dapat memikirkannya. Ini adalah siaran pertama saya di stackoverflow, sila beritahu saya jika saya tidak memberikan butiran yang mencukupi.

Answer 1

Anda boleh cuba menggunakan Array.prototype.reduce和Object.entries来循环遍历sections的键/值对，并根据需要设置true/false，从而创建一个新的sectionsobjek seperti ini:

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

Jika anda mendapati anda perlu mengubah suai hartanah secara langsung, anda boleh menggunakan Array.prototype.forEach:

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

Semoga ia membantu!