Дали тестовое задание во 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>
