Как изменить background в одном из компонентов дочернего элемента?

Question

В родителе перебираю объект, передаю пропсами id и элементы в дочерний компонент, затем рендерю этот объект в дочернем компоненте, нужно сделать так что бы по событию click активный компонент h3 менял свой background, и что бы только один h3 оставался активным, кто шарит помогите)

 <div class="cart">
   <h3 @click="actives(idx)" :class="[idx === this.active ? 'colorsss' : '']"  style="cursor: pointer" >
     {{ product.title }}
   </h3>
   <p>{{ product.countproduct }}</p>
   <p>{{ product.price }}</p>
 </div>
</template>
<script>
export default {
 name: "Cart",
 data() {
     return {
         active: null
     }
 },
 props: {
   product: {
     type: Object,
     required: true,
   },
   idx: {
     type: Number,
   },
 },
methods: {
 actives(i) {
   this.active = i
 }
}
};```

Answer 1

Обычно меняют не стили элемента, а его набор классов (по селекторам которых, в CSS и стилизуют):

new Vue({
  el: '#cart',
  data() { return {
    activeProductId: null,
    cart: [],
  }},
  mounted() {
    fetch('https://fakestoreapi.com/products')
      .then(r => r.json()).then(data => this.cart = data);
  },
});

* { font-family: sans-serif; }
.cart-item { display: flex; justify-content: space-between; border: 1px solid #ccc; cursor: pointer; }
.cart-item * { margin: 0; }
.cart-item h3 { flex: 1 1; padding: 0.5rem 0 0.5rem 0.5rem; }
.cart-item p { align-self: center; padding: 0 0.5rem; }
.cart-item:not(:first-child) { border-top: none; }

.cart-item.active h3 { background: #def; }  /* ◂◂◂ */

<div id="cart">
  <h4 v-if="!cart.length">Загрузка...</h4>
  <div class="cart-item" v-for="product in cart" :key="product.id"
    :class="{ active: activeProductId === product.id }"
    @click="activeProductId = product.id"
  >
    <h3>{{ product.title }}</h3>
    <p>${{ product.price }}</p>
  </div>
</div>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>

Пример с другой разметкой, т.к. та что в вопросе - капитально сломана...

Если все же хочется именно на инлайн-стили элемента биндить, то и это возможно, конечно:

<h3 :style="{ backgroundColor: (activeProductId === product.id) ? '#def' : 'transparent' }">...</h3>

Вместо использования тернарного оператора, можно возвращать объект стилей из метода или вычисляемого свойства.

БЛОГ НА HUSL

Как изменить background в одном из компонентов дочернего элемента?

Ответы (1 шт):