1

Подскажите пожалуйста, у меня есть такой код

<div class="row">
                    <div class="col-lg-6 col-md-8 offset-lg-0 offset-md-2">
                        <div class="tab-accordion pt-75">
                            <div class="tab-content">
                                <div v-for="(product, index) in products" :key="product.id" :id="'menu'+product.id"
 :class="index === 0 ? 'tab-pane fade active show' : 'tab-pane fade'">
                                    <img :src="getPhoto(product.image)" alt="">
                                </div>

                            </div>
                        </div>
                    </div>

                    <div class="col-lg-6 pt-75">
                        <ul class="nav nav-tabs">
                            <li v-for="(product, index) in products" :key="product.id"
class="nav-item"><a :class="index === 0 ? 'active' : ''" data-toggle="tab" :href="'menu'+product.id">
                                <div class="product-list">
                                    <div class="product-list-img">
                                       <img :src="getPhoto(product.image)" width="270" height="235" alt="">
                                    </div>
                                    <div class="product-list-info">
                                        <div class="product-list-info-table">
                                            <p>{{product.title}}</p>
                                            <h5>{{product.price}} грн.</h5>
                                            <div class="product-list-icon">
                                                <i class="fa fa-shopping-cart"></i>
                                                <i class="fa fa-heart"></i>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </a></li>
                        </ul>
                    </div>
                </div>

Где выводится два списка продуктов. V-for для 2-й части кода, где перебираются и по умолчанию выводится для первого элемента(индекса) "li" - работает как нужно - у меня при нажатии на элемент, меняется значения для класса - По умолчанию:class="index === 0 ? 'active' : ''".

Но к сожалению для верхней части кода - я не знаю как написать, чтобы по нажатию на нижние элементы - класс добавлялся и к верхней части.

2
  • не совсем понятно, в каком месте, у Вас что-то там делается "по нажатию", но в Вашем случае, необходимо завести переменную, типа activeIndex, по нажатию менять ее значение и потом сравнивать с ней class="index === activeIndex ? 'active' : ''"
    – Dmytro
    6 апр 2021 в 8:02
  • Добавил такой код во вторую часть - <a v-on:click="checkIsActiveProduct(product.id)" :class="index === 0 ? 'active' : ''" data-toggle="tab" :href="'menu'+product.id"> Код в методах - checkIsActiveProduct(product){ console.log(product); return product ; } В верхней части вроде всё правильно написал - :class="checkIsActiveProduct() === product.id ? 'tab-pane fade active show' : 'tab-pane fade'" Но к сожалению ничего не меняется ( хотя в консоле выводится номер id продукта, который нужен) 6 апр 2021 в 8:21

1 ответ 1

2

Обработчик клика висит только на 1-ом блоке

const app = new Vue({
  el: "#app",
  data() {
    return {
      activeIndex: -1,
      tags: [{
          id: 1,
          name: "lemon"
        },
        {
          id: 3,
          name: "apple"
        },
        {
          id: 4,
          name: "pear"
        },
      ],
    };
  },
});
#app {
  display: flex;
}

.block {
  margin: 24px;
  display: flex;
  flex-direction: column;
}

span {
  padding: 8px;
}

.active {
  background-color: green;
}
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

<div id="app">
  <div class="block">
    <span v-for="(tag, index) in tags" :class=" {'active': activeIndex === index}" @click="activeIndex = index">
          {{tag.name}}
        </span>
  </div>
  <div class="block">
    <span v-for="(tag, index) in tags" :class=" {'active': activeIndex === index}">
          {{tag.name}}
        </span>
  </div>
</div>

1
  • Спасибо Вам огромное! Да, такое вроде простое решение, а я пытался функцией. 6 апр 2021 в 10:32

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.