如何根據在 Vue js 中的另一個 div 中單擊的內容來顯示和隱藏 div？

Question

我有 2 個 div，一個顯示產品名稱（產品 1、產品 2...等），另一個顯示產品文章（產品 1：第 1 條、產品 2：第 1 條、產品 2：第 2 條） ……）。 我想要一個功能，我點擊產品 1，然后產品 1 的文章應該出現。 當我點擊另一個產品時，假設產品 2，那么產品 1 的文章應該隱藏，產品 2 的文章顯示。

像這樣：

案例 1：點擊產品 1 時

產品一

產品 1 的文章<--- 在頁面加載時顯示 div。

1. 產品 1：第 1 條
2. 產品 1：第 2 條

產品二

產品 3

產品 4

---

案例 2：點擊產品 2 時

產品 1 <--- 隱藏 div

產品二

產品 2 的文章<--- 顯示 div

1. 產品 2：第 1 條
2. 產品 2：第 2 條

產品 3

產品 4

我曾嘗試使用 Boostrap Vue 的手風琴，但這不符合我在其他要求中的需求。 這是我到目前為止：

<div class="container">
    <div
      v-for="(product, productIndex) in productsandarticles"
      :key="productIndex"
    >
      <div class="articlelistingdesktop">
        <div class="productlisting">                             <--- Product Names Div
          {{ product[0].productNames['en'] }}
        </div>
        <div class="articlelisting">                             <--- Product Articles Div
          <h4>{{ product[0].productNames['en'] }} 's articles</h4>
          <div
            v-for="(productInner, productInnerIndex) in product"
            :key="productInnerIndex"
          >
            <nuxt-link :to="'/' + productInner.title_slug"> .    <--- Link to the articles
              {{ productInnerIndex + 1 }}. {{ productInner.title['en'] }}
            </nuxt-link>
          </div>
      </div>
    </div>
  </div>
</div>

我的所有數據都來自一個 JSON 文件，目前，我的代碼顯示了所有產品名稱及其各自的文章。 我也試圖避免在我的項目中使用 jquery。 如果有人可以提供幫助，我將不勝感激。

謝謝！

Answer 1

只需使用反應性屬性來跟蹤“活動”產品的索引...

在您的組件中：

data() {
  return {
    activeProductIndex: null
  }
}

<div class="container">
    <div
      v-for="(product, productIndex) in productsandarticles"
      :key="productIndex"
    >
      <div class="articlelistingdesktop">
        <div class="productlisting" @click="activeProductIndex = productIndex">                
          {{ product[0].productNames['en'] }}
        </div>
        <div class="articlelisting" v-if="activeProductIndex === productIndex">
          <h4>{{ product[0].productNames['en'] }} 's articles</h4>
          <div
            v-for="(productInner, productInnerIndex) in product"
            :key="productInnerIndex"
          >
            <nuxt-link :to="'/' + productInner.title_slug"> .    <--- Link to the articles
              {{ productInnerIndex + 1 }}. {{ productInner.title['en'] }}
            </nuxt-link>
          </div>
      </div>
    </div>
  </div>
</div>

模板更改說明：

<div class="productlisting" @click="activeProductIndex = productIndex"> - 使用點擊事件將當前產品索引分配給activeProductIndex變量

<div class="articlelisting" v-if="activeProductIndex === productIndex"> - 僅在產品“活動”時呈現文章列表