Как определить, включено ли show more для div?

Question

У меня очень простой вопрос, но по какой-то причине я просто не могу придумать, как это должно быть сделано в vue.

У меня есть div на моем веб-сайте, который зацикливает массив с помощью v-forпоказать разные статьи магазина.Мне бы хотелось, чтобы, когда люди нажимали на ссылку «Показать больше» в этом разделе, они отображали все элементы этой статьи магазина.

Это процесс:

• Персона загружает страницу, поэтому я отправляю необязательный запрос в API, чтобы получить все статьи магазина

• 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>

То, что я хотел бы сделать, это зациклить все значения в «article» и добавить переменную «display», являющуюся true или false, а затем добавить @click, для которой установлен переменный displayв этом массиве индекс в true / false.Но это кажется очень неэффективным способом сделать это, потому что мне пришлось бы зациклить все значения.

Answer 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).Если приведенное выше не работает, вы можете использовать это. $ 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