Vue.jsでマウスオーバーイベントをハンドリングする方法について質問です。
やりたいこと
グリッドコンポーネントのサンプルプログラムで、
行にマウスオーバーすると行の色が変化する。
https://jp.vuejs.org/examples/grid-component.html
やったこと
// register the grid component
Vue.component('demo-grid', {
template: '#grid-template',
props: {
data: Array,
columns: Array,
filterKey: String
},
data: function() {
var sortOrders = {}
this.columns.forEach(function(key) {
sortOrders[key] = 1
})
return {
sortKey: '',
sortOrders: sortOrders
}
},
methods: {
sortBy: function(key) {
this.sortKey = key
this.sortOrders[key] = this.sortOrders[key] * -1
},
mouseover: function(event) {
alert(event.target);
alert(event.target.textContent);
}
}
})
// bootstrap the demo
var demo = new Vue({
el: '#demo',
data: {
searchQuery: '',
gridColumns: ['name', 'power'],
gridData: [{
name: 'Chuck Norris',
power: Infinity
}, {
name: 'Bruce Lee',
power: 9000
}, {
name: 'Jackie Chan',
power: 7000
}, {
name: 'Jet Li',
power: 8000
}]
}
})
body {
font-family: Helvetica Neue, Arial, sans-serif;
font-size: 14px;
color: #444;
}
table {
border: 2px solid #42b983;
border-radius: 3px;
background-color: #fff;
}
th {
background-color: #42b983;
color: rgba(255, 255, 255, 0.66);
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-user-select: none;
}
td {
background-color: #f9f9f9;
}
th,
td {
min-width: 120px;
padding: 10px 20px;
}
th.active {
color: #fff;
}
th.active .arrow {
opacity: 1;
}
.arrow {
display: inline-block;
vertical-align: middle;
width: 0;
height: 0;
margin-left: 5px;
opacity: 0.66;
}
.arrow.asc {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid #fff;
}
.arrow.dsc {
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-top: 4px solid #fff;
}
#search {
margin-bottom: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.24/vue.js"></script>
<!-- component template -->
<script type="text/x-template" id="grid-template">
<table>
<thead>
<tr>
<th v-for="key in columns" @click="sortBy(key)" :class="{active: sortKey == key}">
{{key | capitalize}}
<span class="arrow" :class="sortOrders[key] > 0 ? 'asc' : 'dsc'">
</span>
</th>
</tr>
</thead>
<tbody>
<tr v-for="
entry in data
| filterBy filterKey
| orderBy sortKey sortOrders[sortKey]" @mouseover="mouseover">
<td v-for="key in columns">
{{entry[key]}}
</td>
</tr>
</tbody>
</table>
</script>
<!-- demo root element -->
<div id="demo">
<form id="search">
Search
<input name="query" v-model="searchQuery">
</form>
<demo-grid :data="gridData" :columns="gridColumns" :filter-key="searchQuery">
</demo-grid>
</div>
html側のtr要素に@mouseoverイベントを追加しましたが、
javascript側でevent.targetのプロパティを見てもtdが返ってきます。
当然tdのスタイルを変更してもマスの色しか変わりません。
行全体の色を変更するにはどうしたらいいでしょうか?
HTML側
<tr v-for="
entry in data
| filterBy filterKey
| orderBy sortKey sortOrders[sortKey]" @mouseover="mouseover">
js側
mouseover: function(event) {
alert(event.target);
alert(event.target.textContent);
}
よろしくお願いします。