VueJS - Erstellen einer Tabelle, aber in der Lage, auf eine Zeile zu klicken, um das Detail dieser Zeile zu öffnen

Question

Ich bin neu in VueJS, also ist dies wahrscheinlich ein sehr einfaches Problem, aber hier geht es.

Ich rufe meine API an, um eine Reihe von Datensätzen zu erhalten. Ich möchte diese Datensätze in einer einfachen Tabelle anzeigen, aber dann möchte ich in der Lage sein, auf einen Link in der letzten Zelle der Zeile zu klicken und an eine neue URL gesendet zu werden - eine URL für das Detail dieses Objekts.

Hier ist, was ich bisher:

Vue Stuff:

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

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

Wenn ich die Seite zu öffnen, wird die Tabelle richtig präsentiert und alle Daten werden korrekt geladen. Es ist jedoch das Klicken des Links in der letzten Zelle, die nicht funktioniert. Ich glaube, ich habe ein Problem mit dem Umfang - etwas darüber, wie die Zeile keine Methode hat sayConsole, aber ich bin mir nicht sicher (das kann ich aus dem Tag der Erforschung des Problems feststellen).

Idealerweise möchte ich eine URL haben, die mich zu einer Detailseite für dieses Objekt bringt.

Answer 1

Ich denke, ich habe das Problem herausgefunden - vor allem meine ernste fehlende Erfahrung mit VueJS. Hier ist, wie ich es gelöst habe:

1. Ich teilte die Tabelle in 2 Komponenten. Die league-table und die league-row Komponenten.

2. Mit der Trennung von Komponenten, konnte ich nun Methoden/Datenmanipulation auf den einzelnen Komponenten erstellen und diese Daten therin

3. Ich entdeckte auch, dass href-Tags in HTML sind Setup in VueJS mit der v-bind:href(url) Syntax

4. Ich entdeckte, dass HTML-Tabellen (und einige andere HTML-Elemente) Schwierigkeiten haben, mit VueJS gerendert werden. Sie sehen also, dass ich in meiner Tabellenkomponente <tr is='league-row'... hinzufügen muss, damit VueJS die Zeilenkomponente verwendet.

mit, dass also im Sinne, hier ist, wie ich die Dinge redsigned es funktioniert (obwohl ich immer noch pro-Zeile nicht Klicken habe, aber ich habe nur einen Knopf in der letzten Zelle).

HTML Stuff Die HTML-signifanctly reduziert:

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

Dies ist wahrscheinlich auch einfacher sein könnte, aber es funktioniert jetzt.

VueJS Komponenten

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

Dank für Ihre Tipps, ich habe das gleiche Problem, aber ein einen workaroud gefunden ohne Jquery zu haben.

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

und meine vuejs:

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

Ich hoffe, dass es künftig Leser