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

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

Answer 2

我想我发现了这个问题 - 主要是我对VueJS缺乏经验。以下是我如何解决它：

我将表拆分为2个组件。 def as_row(obj): if isinstance(obj, dict): dictionary = {k: as_row(v) for k, v in obj.items()} return Row(**dictionary) elif isinstance(obj, list): return [as_row(v) for v in obj] else: return obj和league-table组件。league-row和href组件。
随着组件的分离，我现在可以在各个组件和数据库上创建方法/数据操作
我还发现HTML中的v-bind:href(url)代码是使用<tr is='league-row'...语法在VueJS中设置的
我发现HTML表（以及其他一些HTML元素）很难用VueJS渲染。因此，您将在下面的表组件中看到，我必须添加<div id='league-overview' class='table-responsive'> <component v-bind:is='currentView'></component> </div>来告诉VueJS使用行组件。

所以，考虑到这一点，这里是我如何重新设计使其工作的东西（虽然我仍然没有按行点击，但我只是在最后一个单元格中放了一个按钮）。

HTML Stuff HTML显着减少：

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',
  },
})

这可能更简单，但现在可以使用。

VueJS组件

{{1}}

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

2 个答案: