Как привязать отдельные элементы массива vue к классу

Question

У меня есть массив изображений, возвращаемых из API в моем компоненте vue, повторяемых и отображаемых так:

<span v-for="pic in pics">
   <img :src="'images/'+pic" onmouseover="highlight(pic)" :class="{isHovered = hovered}" />
</span>

В моем сценарии:

data(){
    return {
       pics: [],
       hovered: false,
    }
},
methods:{
   highlight(pic){
       this.hovered = true;
  } 
}

В моем css

isHovered{
    border: 2px solid red;
    scale: 1.2;
    cursor: pointer;
}

Проблема в том, что каждый раз, когда я наводю курсор на изображение, все изображения получают класс isHovered.Я намеревался привязать только изображение к классу isHovered.Что я делаю не так, пожалуйста.Любое руководство будет оценено.

Answer 1

В вашем коде вы пытаетесь вызвать эффект hove для всех изображений, если какое-либо одно изображение было наведено, также у вас есть синтаксическая ошибка, чтобы применить класс.Однако было бы много способов достичь этого, один из них, как показано ниже

var app = new Vue({
el:"#app",
data(){
    return {
       pics: [{img:"https://i.ytimg.com/vi/qV6y1SksAcE/maxresdefault.jpg",hovered:false},{img:"http://www.memorandum.com/wp-content/uploads/2018/05/trunk-club-memorandum-closet-staples-chic-working-girl-professional-women-capsule-wardrobe-10.jpg",hovered:false},{img:"http://www.memorandum.com/wp-content/uploads/2018/07/top-working-women-career-sites-17-680x1020.jpg",hovered:false}],
       hovered: false,
    }
},
methods:{
   
 }
});

.isHovered{
  border:3px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div>
<div v-for="(pic,index) in pics">
   {{index+1}}
   <img :src="pic.img" v-on:mouseover="pic.hovered = true" :class="{isHovered:pic.hovered}" v-on:mouseout="pic.hovered = false" width="60"/>
</div>
</div>
</div>

Answer 2

Я читаю ОП, но не могу найти ответ, почему вы не можете использовать только CSS для этого?Для этого излишне использовать логику Vue.

// thanks to @C2486 for the snippet
var app = new Vue({
  el: "#app",
  data() {
    return {
      pics: [{
        img: "https://i.ytimg.com/vi/qV6y1SksAcE/maxresdefault.jpg"
      }, {
        img: "http://www.memorandum.com/wp-content/uploads/2018/05/trunk-club-memorandum-closet-staples-chic-working-girl-professional-women-capsule-wardrobe-10.jpg"
      }, {
        img: "http://www.memorandum.com/wp-content/uploads/2018/07/top-working-women-career-sites-17-680x1020.jpg"
      }]
    }
  }
});

.some-img-class:hover {
  border: 3px solid red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <div>
    <div v-for="(pic,index) in pics">
      {{index+1}}
      <img :src="pic.img" width="60" class="some-img-class" />
    </div>
  </div>
</div>

Answer 3

Это потому, что у вас есть одно свойство hovered, общее для всех ваших pics.Вам нужно переписать свои фотографии, чтобы у каждого было свое hovered состояние.Например ..

data(){
    return {
       pics: [
          {id: 0, name: 'pic1.jpg', hovered: false},
          {id: 1, name: 'pic2.jpg', hovered: false},
          {id: 2, name: 'pic3.jpg', hovered: false},
          ...
       ]
    }
},
methods:{
   toggleHighlight(pic){
       pic.hovered = !pic.hovered;
  } 
}

Затем в вашем шаблоне вы можете ссылаться на отдельные hovered состояния ..

<span v-for="pic in pics">
   <img :src="'images/'+pic.name" onmouseover="toggleHighlight(pic)" :class="{isHovered: pic.hovered}" />
</span>