VueJS - 創建一個表格，但能夠點擊一行來打開該行的詳細信息

Question

我是VueJS的新手，所以這可能是一個非常簡單的問題，但是在這裏。

我打電話給我的API來獲取一組記錄。我想在一個簡單的表格中顯示這些記錄，但是我希望能夠單擊該行最後一個單元格中的鏈接併發送到一個新的URL - 該對象的詳細信息的URL。

這是我到目前爲止有：

Vue的東西：

var vm = new Vue({ 
    el: '#league-table', 
    data: { 
    leagues: [], 
    apilink: '/api/leagues/', 
    }, 

    mounted: function() { 
    this.getLeagues(); 
    }, 
    methods: { 
    getLeagues: function() { 
     var self = this 
     $.get('/api/leagues/', function(data){ 
     $.each(data, function(index, obj) { 
      self.leagues.push(obj) 
     }); 
     }); 
    }, 
    sayConsole: function() { 
     console.log("OUTPUT here....") 
    } 
    } 
}); 

HTML的東西：

<div class='card__content'> 
     <div id='league-table' class='table-responsive'> 
     <table class='table table--lg team-roster-table table-hover'> 
      <thead> 
      <th class='team-roster-table__name'>ID</th> 
      <th class='team-roster-table__name'>Name</th> 
      <th class='team-roster-table__name'>Characters</th> 
      <th></th> 
      </thead> 

      <tbody> 
      <tr v-for='league in leagues'> 
       <td class='team-roster-table__number'>{{ league.id }}</td> 
       <td class='team-roster-table__name'>{{ league.name }}</td> 
       <td class='team-roster-table__name'>{{ league.max_players }}</td> 
       <td class='team-roster-table__name'> 
       <a v-on:click='sayConsole'>{{ league.id }}</a> 
       </td> 
      </tr> 
      </tbody> 
     </table> 
     </div> 
    </div> 

當我打開網頁，表中正確呈現，並且所有數據都正確加載。但是，這是最後一個單元格中不工作的鏈接的點擊。我相信我有一些範圍問題 - 關於該行如何沒有方法sayConsole，但我不太確定（這是我可以從研究該問題的那天開始確定的）。

理想情況下，我想要一個URL，將我帶到該對象的詳細信息頁面。

Answer 1

我想我想出了這個問題 - 主要是，我嚴重缺乏VueJS的經驗。以下是我如何解決它：

1. 我將表拆分爲2個組件。 league-table和league-row組件。

2. 隨着成分的分離，我現在可以對單個組件創建方法/數據處理和數據therin

3. 我還發現，在HTML href標籤設置在VueJS與v-bind:href(url)語法

4. 我發現HTML表格（和其他一些HTML元素）很難用VueJS渲染。所以你會在下面的表格組件中看到，我必須添加<tr is='league-row'...來告訴VueJS使用行組件。

因此，考慮到這一點，這裏就是我redsigned東西使它工作（雖然我還沒有按行點擊，但我只是把一個按鈕，在最後一個單元格）。

HTML東西 的HTML被signifanctly降低：

<div id='league-overview' class='table-responsive'> 
    <component v-bind:is='currentView'></component> 
    </div> 

這很可能是更簡單，但它適用於現在。

VueJS組件

Vue.component('league-row', { 
    template: ` 
    <tr> 
     <td class='team-roster-table__number'>{{ league.id }}</td> 
     <td class='team-roster-table__name'>{{ league.name }}</td> 
     <td class='team-roster-table__name'>{{ league.max_players }}</td> 
     <td><a v-bind:href=(url) class='btn btn-primary btn-xs'>View League</a></td> 
    </tr> 
    `, 
    props: ['league'], 
    data: function() { 
    return { 
     url: "/leagues/" + this.league.id + "/", 
    } 
    }, 
}) 

Vue.component('league-table', { 
    template: ` 
    <table class='table table--lg team-roster-table table-hover'> 
     <thead> 
     <th class='team-roster-table__name'>ID</th> 
     <th class='team-roster-table__name'>Name</th> 
     <th class='team-roster-table__name'>Characters</th> 
     <th></th> 
     </thead> 
     <tbody> 
     <tr is='league-row' v-for='league in leagues' :league="league"></tr> 
     </tbody> 
    </table> 
    `, 
    data: function() { 
    return { 
     leagues: [], 
     apilink: '/api/leagues/', 
    } 
    }, 
    mounted: function() { 
    this.getLeagues(); 
    }, 
    methods: { 
    getLeagues: function() { 
     var self = this 
     $.get('/api/leagues/', function(data){ 
     $.each(data, function(index, obj) { 
      self.leagues.push(obj) 
     }); 
     }); 
    }, 
    }, 
}) 


var vm = new Vue({ 
    el: '#league-overview', 
    data: { 
    currentView: 'league-table', 
    }, 
}) 

Answer 2

感謝您的建議，我有同樣的問題，但發現了一個workaroud無需jQuery的。

<tbody v-for="product in products" :key="product.id" v-on:click="clickList(product)"> 
<tr class='clickable-row'> 
    <td> {{ product.id }}</td> 
    <td style="text-align: center;">{{ product.productName }}</td> 
    <td style="text-align: center;">{{ product.productDesc }}</td> 
</tr> 

和我vuejs：

clickList: function (product) { 
    console.log("clickList fired with " + product.id); 
} 

我希望它有助於未來的讀者