gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-01 04:24:14 25 4
gpt4 key购买 nike

我有 2 个 div,一个显示产品名称(产品 1、产品 2...等),另一个显示产品文章(产品 1:文章 1,产品 2:文章 1,产品 2 :第 2 条...)。我想要一个功能,我点击产品 1,然后产品 1 的文章应该出现。当我单击另一个产品时,比方说产品 2,然后应该隐藏产品 1 的文章并显示产品 2 的文章。

像这样:

案例 1:点击产品 1 时

产品 1

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

  1. 产品 1:第 1 条
  2. 产品 1:第 2 条

产品 2

产品 3

产品 4


案例 2:点击产品 2 时

产品 1 <--- 隐藏 div

产品 2

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

  1. 产品 2:第 1 条
  2. 产品 2:第 2 条

产品 3

产品 4

我曾尝试使用 Boostrap Vue 的 Accordion ,但这不符合我在其他要求中的需求。这是我目前所拥有的:

<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。如果有人可以提供帮助,我将不胜感激。

谢谢!

最佳答案

只需使用响应式属性来跟踪“事件”产品的索引...

在你的组件中:

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"> - 仅在产品处于“事件”状态时呈现文章列表

关于javascript - 我如何根据在 Vue js 中的另一个 div 中单击的内容显示和隐藏一个 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59575729/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com