Vue.js公式サンプルのグリッドコンポーネントで、行にマウスオーバーイベントを設定する

Question

###前提・実現したいこと
Vue.js公式サンプルのグリッドコンポーネントで、行にマウスオーバーイベントを設定する。
グリッドコンポーネントのサンプルプログラムで、
行にマウスオーバーすると行の色が変化する。
Vue.js公式

###試したこと
jsfiddle
html側のtr要素に@mouseoverイベントを追加しましたが、
javascript側でevent.targetのプロパティを見てもtdが返ってきます。
当然tdのスタイルを変更してもマスの色しか変わりません。
行全体の色を変更するにはどうしたらいいでしょうか？

###該当のソースコード

 <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>

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);
    }
  }
})

Answer 1

cssでtdのbackground-colorがついてるので、thにいくら色をつけても見えないと思います。
tdの色をtransparentにして、trで色をつけてはいかがでしょう。
また、jsを使わなくともcssでtr:hoverの属性を使えばマウスオーバー時に色を変えれます。
勝手で申し訳ありませんが、該当のjsFiddleを更新してみました。
https://jsfiddle.net/m7sgaron/426/

もし、色を変えるだけでなくtr要素がイベント時に取りたいのであれば、event.target.parentでtr要素が取れます。

Comments

[02773]

ありがとうございます。
問題が解決しました。

js側でスタイルを変更しようとばかり考えていたので大変参考になりました。