如何检测是否为 div 启用了显示更多？答案

【问题标题】：How to detect if show more is enabled for a div?如何检测是否为 div 启用了显示更多？
【发布时间】：2019-05-04 15:41:00
【问题描述】：

我有一个非常简单的问题，但由于某种原因，我无法想出在 vue 中应该如何完成。

我的网站上有一个 div，它使用 v-for 循环数组以显示不同的商店文章。我希望当人们单击该 div 中的“显示更多”链接时，它会显示该商店文章中的所有商品。

这是过程：

Person 加载页面，因此我向 API 发送 axios 请求以获取所有商店文章
axios 返回一个包含所有店铺文章对象的数组
页面在其自己的 div 中显示每篇文章，如果有人点击“显示更多”，它应该只显示他们点击的文章的更多内容

我目前解决这个问题的方法是循环遍历所有商店文章对象并添加一个变量“show”，该变量可以为真或假。但这似乎是错误的做法。我将如何以正确的方式实现这一目标？

编辑：添加示例代码 所以首先我调用api来获取所有文章

fetchArticles: function() {
                var self = this;
                axios.get('/api/shop/articles/crowdfunding').then(function(response) {
                    self.articles = response.data;
                }).catch(function() {
                    alert('An error occured on the page.')
                });
            },

接下来它会显示在 div 中：

                        <div class="col-md-6 col-lg-4" v-for="article in articles">
                            <div class="card">
                                <img class="card-img-top" src="/assets/images/valar/mountain_desert_286x180.png" alt="Card image cap">
                                <div class="card-body" style="text-align: center;">
                                    <h5>{{article.title}}</h5>
                                    <p>{{article.description}}</p>
                                    <a href="#" @click.prevent="????">Show Items</a>
                                    <div class="row" v-if="?????">
                                        <div class="col-4" v-for="item in article.items">
                                            <DisplayItem :item_id="item.item_id" :key="item.id"></DisplayItem>
                                        </div>
                                    </div>
                                    <button class="nk-btn nk-btn-color-white link-effect-4 float-right ready" @click.prevent="buyArticle(article.id)">Buy (${{article.price}})</button>
                                </div>
                            </div>
                        </div>

我想要做的是循环“文章”中的所有值并添加一个变量“显示”为真或假，然后将@click 添加到该数组索引上的显示变量为真/假。但这似乎是一种非常低效的方法，因为我必须循环所有值。

【问题讨论】：

您当前的代码是什么？将其包含在问题中。
目前没有代码，因为我想不出如何正确地做到这一点：/ 但我现在会写一些示例代码，并在 5 分钟内更新帖子！
“不正确”地做，但是做:)。你必须从某个地方开始，你必须尝试。当你在这个问题上绞尽脑汁的时间足够长时，你会惊讶于你能从自己身上挤出多少东西。
顺便说一句，在我看来，这样做似乎并没有错。在纯 JS 中，您将“倾听”每篇文章的点击，然后按照您想要的方式对其进行操作。我对 Vue 不太熟悉，但我相信您可以使用 @click 来实现类似的效果。
@NemanjaGlumac 是的，我想象一下只是在做 @click="article[INDEX].display = true" 但是我如何将显示变量添加到数组中的每个对象而不循环它们并添加这个变量?除非您是正确的，并且这是执行此操作的实际方法。

标签： javascript html vue.js vuejs2 frontend

【解决方案1】：

不存在的属性将被 Vue 视为false。因此，无需为所有对象设置 false。一旦用户单击该对象，只需将该对象的 show_items 设置为 true。

                    <div class="col-md-6 col-lg-4" v-for="article in articles">
                        <div class="card">
                            <img class="card-img-top" src="/assets/images/valar/mountain_desert_286x180.png" alt="Card image cap">
                            <div class="card-body" style="text-align: center;">
                                <h5>{{article.title}}</h5>
                                <p>{{article.description}}</p>
                                <a href="#" @click.prevent="article.show_items = true">Show Items</a>
                                <div class="row" v-if="article.show_items">
                                    <div class="col-4" v-for="item in article.items">
                                        <DisplayItem :item_id="item.item_id" :key="item.id"></DisplayItem>
                                    </div>
                                </div>
                                <button class="nk-btn nk-btn-color-white link-effect-4 float-right ready" @click.prevent="buyArticle(article.id)">Buy (${{article.price}})</button>
                            </div>
                        </div>
                    </div>

有时，仅仅设置一个新属性可能不是反应式的（因为该属性不受 Vue 监控）。如果上面不行，可以使用 this.$set(object, key, value):

@click.prevent="makeItemsVisible(article)">Show Items</a>


makeItemsVisible(article){
    this.$set(article, 'show_items', true);
}

参考 Vue 反应性，以及为什么有时我们需要显式调用 set： https://vuejs.org/v2/guide/reactivity.html

【讨论】：