26769


Vue.jsでマウスオーバーイベントをハンドリングする方法について質問です。

やりたいこと  
グリッドコンポーネントのサンプルプログラムで、  
行にマウスオーバーすると行の色が変化する。  
<https://jp.vuejs.org/examples/grid-component.html>

やったこと

[code]

    // 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
        }]
      }
    })
[/code]

[code]

    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;
    }
[/code]

[code]

    <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>
[/code]

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

HTML側

[code]

       <tr v-for="
        entry in data
        | filterBy filterKey
        | orderBy sortKey sortOrders[sortKey]" @mouseover="mouseover">
    
[/code]

js側

[code]

    mouseover: function(event) {
      alert(event.target);
      alert(event.target.textContent);
    }
    
[/code]

よろしくお願いします。


CC BY-SA 4.0
2016-06-15T01:41:42.500
26754
2019-12-13T18:22:08.967
2019-12-13T18:20:56.673
32986
10728
question
vue.js
Vue.js公式サンプルのグリッドコンポーネントで、行にマウスオーバーイベントを設定する


`event.currentTarget` を使って下さい。

簡単に言うと、  
イベントが発生した要素(`event.target`)と、  
イベントをキャッチした要素(`event.currentTarget`)の  
2種類ある、ということです。

イベントバブリングについてお調べになると、理解が深まると思います。  
[DOMイベントのキャプチャ/バブリングを整理する 〜 JSおくのほそ道 #017 -
Qiita](http://qiita.com/hosomichi/items/49500fea5fdf43f59c58)

なお、やりたいことが、行全体の色を変えるだけでしたら、私なら css を書くと思います。

[code]

    tr:hover td {
      background-color: red
    }
    
[/code]

[code]

    // 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
        }]
      }
    })
[/code]

[code]

    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;
    }
    
    tr:hover td {
      background-color: red
    }
    
    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;
    }
[/code]

[code]

    <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>
[/code]


CC BY-SA 4.0
2016-06-15T12:57:36.483
26769
2019-12-13T18:22:08.967
2019-12-13T18:22:08.967
32986
7471
26754
answer