@Luchiniel

Как реализовать hover эффект во vue.js?

Дали тестовое задание во vue.js. Суть такова - выводим данные по ссылке в json формате (сделала), на экран выводим определенные значения (исходя из данных ключей - сделала).

Так вот я получила, в том числе, массив с email. Надо реализовать hover при наведении на ссылку. Вот тут я и подзависла. При hovere выделяются все ссылки, вместо текущей. Буду рада любой наводке/подсказке!

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  
</head>
<body>
<div id="app">
	<div v-for="user of users"
		v-bind:user="user">
		<div>{{user.commit.author.name}}</div>
		<div>{{user.commit.author.date}}</div>
		<div>
			<a 
			:style = "mail" 
			v-on:mouseover = "changeColor"
			v-on:mouseleave = "originalColor"
			  v-bind:href="`mailto:{{user.commit.author.email}}`">{{user.commit.author.email}}</a></div>
	</div>
</div>
<script>
	  
let url = 'https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits';

var app = new Vue({
  el: '#app',
data: {

users:[],
mail:{
	color:'#ccc',

}
  },
   methods:{
    changeColor : function(e) {
    	e.preventDefault();
    	
      this.mail.color = "red";
      console.log(this.mail);
      

      
    },
    originalColor : function() {
      this.mail.color = "#ccc";
     
    }
  },
mounted(){
  	fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits')
  	.then(response=>response.json())
  	.then(json=>{
  		this.users=json
  	
  	},

  	)
  }
})
 
 </script>
 <style></style>
</body>
</html>
  • Вопрос задан
  • 94 просмотра
Решения вопроса 1
Seasle
@Seasle
Помог - отметь решением \( ゚ヮ゚)/
Обычный :hover больше не работает? Ну можно так:
<a 
    :style="getMailStyle(user)" 
    v-on:mouseover="(event) => changeColor(evebt, user)"
    v-on:mouseleave="() => originalColor(user)"
    v-bind:href="`mailto:{{ user.commit.author.email }}`"
>{{user.commit.author.email}}</a>

methods: {
	getMailStyle: function (user) {
		return {
			color: user.color
		};
	},
	changeColor: function (e, user) {
		e.preventDefault();

		user.color = 'red';
	},
	originalColor: function (user) {
		user.color = '#ccc';
	}
}

fetch('https://api.github.com/repos/javascript-tutorial/en.javascript.info/commits')
	.then(response => response.json())
	.then(json => {
		this.users = json.map(user => ({
			color: '#ccc',
			...user
		}));
	}
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
wapster92
@wapster92
Люблю трилогию ME
Просто пропиши в стилях, зачем использовать для этого события?
Ответ написан
@Luchiniel Автор вопроса
Спасибо, как раз тоже наткнулась на такую ситуацию в одном уроке. Счастью нет предела, оба способа в кармане)))5e7352a96ce45260790654.png
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы