Как добавить класс только к элементу, на который навели мышку?

Question

[blockso]

Как реализовать функционал, где есть одинаковые блоки с одинаковыми классами, но при наведении на кнопку класс должен добавиться только к тому блоку, где навели на кнопку? Сам код:

<div class="col-md-3 services-item" :class="{'hoverClass': active_services}">
          <img src="img/laptop.png" alt="">
          <h3 class="my_services_title">Тест</h3>
          <button class="btn-price" @mouseenter="active_service()" @mouseleave="deactive_service()">Нажать</button>
        </div>
        <div class="col-md-3 services-item" :class="{'hoverClass': active_services}">
          <img src="img/laptop.png" alt="">
          <h3 class="my_services_title">Тест</h3>
          <button class="btn-price" @mouseenter="active_service()" @mouseleave="deactive_service()">Нажать</button>          
        </div>

var body = new Vue({
	el:'#main',
	data:{
		active_services: false
	},
	methods:{
		active_service: function(){
			this.active_services = true;
		},
		deactive_service:function(){
			this.active_services = false;
		}
	}

});

Answer 1

[0xD34F]

<div
  v-for="item in items"
  class="col-md-3 services-item"
  :class="{ hoverClass: item.hover }"
>
  <img :src="item.scr" alt="">
  <h3 class="my_services_title">Тест</h3>
  <button
    class="btn-price"
    @mouseenter="item.hover = true"
    @mouseleave="item.hover = false"
  >Нажать</button>
</div>

data: {
  items: [
    {
      src: 'img/laptop.png',
      hover: false,
    },
    {
      src: 'img/laptop.png',
      hover: false,
    },
  ],
},

UPD. Конечно, я затупил - как подсказывает в комментариях delphinpro, отдельные свойства hover не нужны, достаточно хранить индекс активного элемента.

Comments

[Сергей delphinpro]

<div
  v-for="(item, index) in items"
  class="col-md-3 services-item"
  :class="{ hoverClass: active_services===index }"
>
  <img :src="item.scr" alt="">
  <h3 class="my_services_title">Тест</h3>
  <button
    class="btn-price"
    @mouseenter="active_services=index"
    @mouseleave="active_services=false"
  >Нажать</button>
</div>