VueJS - 创建一个表,但能够单击一行来打开该行的详细信息

Question

我是VueJS的新手,所以这可能是一个非常简单的问题,但是这里有.

我正在调用我的API来获取一组记录.我想在一个简单的表中显示这些记录,但是我希望能够单击该行的最后一个单元格中的链接并将其发送到新的URL - 该对象的详细信息的URL.

这是我到目前为止所拥有的:

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资料:

   <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的workaroud.

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

我希望它能帮助未来的读者