时间戳

首页 > 解决方案 > 如何根据在 Vue js 中的另一个 div 中单击的内容来显示和隐藏 div？

javascript - 如何根据在 Vue js 中的另一个 div 中单击的内容来显示和隐藏 div？

问题描述

我有 2 个 div，一个显示产品名称（产品 1、产品 2...等），另一个显示产品文章（产品 1：第 1 条，产品 2：第 1 条，产品 2：第 2 条...）。我想要一个功能，我点击产品 1，然后产品 1 的文章应该出现。当我点击另一个产品时，假设产品 2，那么产品 1 的文章应该被隐藏，产品 2 的文章会被显示。

像这样：

案例 1：点击产品 1 时

产品一

产品 1 的文章 <--- 加载页面时显示 div。

  1. 产品一：第一条
  2. 产品一：第二条

产品 2

产品 3

产品 4

案例 2：点击产品 2 时

产品 1 <--- 隐藏 div

产品 2

产品 2 的文章 <--- 显示 div

  1. 产品二：第一条
  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。如果有人可以提供帮助，我将不胜感激。

谢谢！

标签： javascripthtmlcssvue.js

解决方案

只需使用反应属性来跟踪“活跃”产品的索引......

在您的组件中：

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">- 仅在产品“活跃”时呈现文章列表

推荐阅读