使部分可单独切换

Question

我不能使用父切换组件（我试过了，因为我只有代码要传递，但它不起作用），但我需要

show

和

!show

单独的独特产品部分。我试过

key

和

id

但没有工作。如何将切换绑定到每个单独的独特产品部分，以便不是所有部分同时切换？基本上

socks

和

shoes

是可切换的，打开/关闭，但是当您单击其中一个时，它们都会打开（和关闭）。

<script>
   const show = ref(false);
</script>

和

const products = {
  "socks": {
    "socksblack": "/socksblack",
    "sockswhite": "/sockswhite",
    },
  "shirts": "/shirts",
  "bags": "/bags",
  "shoes": {
    "shoes4men": "/shoes4men",
    "shoes4women": "/shoes4women",
    }

我的代码：

<div v-for="(product, link) in links" :key="link" class="">
  <template v-if="isObject(link)">
    <div>
      <a href="product" @click="show = !show">{{ link }}</a>
        <div v-show="show" :key="link"><!-- I tried to put :key here and also on the @click event but not working--->
        <!-- the product subcategories -->
        </div>
    </div>
  </template>
</div>

Answer 1

您可以在

show

变量中设置索引，而不是布尔值：

const { ref, reactive } = Vue
const app = Vue.createApp({
  setup() {
    const products = reactive({
    "socks": { "socksblack": "/socksblack", "sockswhite": "/sockswhite", },
    "shirts": "/shirts",
    "bags": "/bags",
    "shoes": { "shoes4men": "/shoes4men", "shoes4women": "/shoes4women", }
    })
    const show = ref(null)
    return { show, products }
  },
})
app.mount('#demo')

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <div v-for="(product, link, idx) in products" :key="link" class="">
    <a href="product" @click.prevent="show = idx">{{ link }}</a>
    <div v-show="show === idx">{{ product }}</div>
  </div>
</div>