vue.js - 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

感谢您的提示，我遇到了同样的问题，但是我找到了一个没有 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);
}

希望对 future 的读者有所帮助