Cell as router-link

[itsjef]

Hi, I am building an SPA, and I want my id field of Users table to be a <router-link to="#"> component which links to that specific user's profile. However, I can't find out an option to render a single cell as needed.

Is there a method to make that possible? Thanks for your attention.

[ratiw]

@itsjef As I don't use vue-router myself, I'm not quite sure how it'll work. But I guess, you might be able to use __slot option to do that. You can check out the tutorial here.

[itsjef]

Thanks for your answer, I have a clue to implement now.

My problem aside, I tried following the tutorial on replacing __component with __slot but it doesn't work, the Actions column is blank now. Can you please take a look?

Screenshot:

My code:

<template>
  <div class="ui container">
    <div class="vuetable-pagination ui basic segment grid">
      <vuetable-pagination-info ref="paginationInfoTop"
      ></vuetable-pagination-info>
      <vuetable-pagination ref="paginationTop"
        @vuetable-pagination:change-page="onChangePage"
      ></vuetable-pagination>
    </div>
    <vuetable ref="vuetable"
      api-url="http://vuetable.ratiw.net/api/users"
      :fields="fields"
      pagination-path=""
      :per-page="20"
      :sort-order="sortOrder"
      detail-row-component="my-detail-row"
      :appendParams="moreParams"
      @vuetable:pagination-data="onPaginationData"
      @vuetable:cell-clicked="onCellClicked"
    >
      <template slot="actions" scope="props">   // <----
        <div class="custom-actions">
          <button class="ui basic button"
            @click="onAction('view-item', props.rowData, props.rowIndex)">
            <i class="zoom icon"></i>
          </button>
          <button class="ui basic button"
            @click="onAction('edit-item', props.rowData, props.rowIndex)">
            <i class="edit icon"></i>
          </button>
          <button class="ui basic button"
            @click="onAction('delete-item', props.rowData, props.rowIndex)">
            <i class="delete icon"></i>
          </button>
        </div>
      </template>
    </vuetable>
    <div class="vuetable-pagination ui basic segment grid">
      <vuetable-pagination-info ref="paginationInfo"
      ></vuetable-pagination-info>
      <vuetable-pagination ref="pagination"
        @vuetable-pagination:change-page="onChangePage"
      ></vuetable-pagination>
    </div>
  </div>
</template>

<script>
import accounting from 'accounting'
import moment from 'moment'
import Vuetable from 'vuetable-2/src/components/Vuetable'
import VuetablePagination from 'vuetable-2/src/components/VuetablePagination'
import VuetablePaginationInfo from 'vuetable-2/src/components/VuetablePaginationInfo'
import Vue from 'vue'

export default {
  components: {
    Vuetable,
    VuetablePagination,
    VuetablePaginationInfo
  },
  data () {
    return {
      fields: [
        // removed for short
        {
          name: '__slot:actions',
          title: 'Actions',
          titleClass: 'center aligned',
          dataClass: 'center aligned'
        }
      ],
      // ...
    }
  },
  methods: {
    // removed for short
    onAction (action, data, index) {
      console.log('slot) action: ' + action, data.name, index)
    }
  }
}
</script>

[ratiw]

@itsjef It looks like the number of <td> in body do not match those in the <th>. You need to check to see if there is any error in the browser console.

[itsjef]

That's the first thing I did, however there was no error warning though. :\

[ratiw]

Is it possible that you forget to remove // <---- ? It's still showing in the code above.

[ratiw]

@itsjef I've created a gist here from the tutorial lesson 11 using __slot instead of __component. It has been tested and work as expected, maybe you can check it out and see what's different.

[itsjef]

@ratiw Heck, it is even weirder now, all I did was clone your tutorial repo, checkout tag/lesson-11 and overwrite the MyVuetable.vue file with your provided gist, and the problem still persists, while browser control shows no debug info, on booth Chrome and Firefox.

Update: I did the same process on another machine, no difference :cry:

[ratiw]

That's strange. I did exactly that and it works. That's why I posted the gist.

[itsjef]

Yes, I understand. Therefore I thought there must be something with my machine, so I repeated the process on another's but still no difference. What a mysterious case...

I'm literally scratching my head now.

My machine runs Linux Mint 18.1 and the other runs Ubuntu 16.06, fyi.

[itsjef]

Anyhow, despite the mysteriously inoperative __slot feature on my machine, I finally managed to achieve my main objective described above using __component :+1: Thank you so much for your support.

[ratiw]

Hmm, I'll try to do the clean install and test it again tonight.

[ratiw]

@itsjef I think I've found the problem. When I tried a clean install of the tutorial, it does have the problem as you mentioned.

The only thing out of place is the version of Vue 2.1 in the package.json. When I changed to "vue": "^2.2.0",, run yarn upgrade and yarn run dev again. It is now work as expected.

So, update Vue to ^2.2.0 does solve the problem. Sorry for the trouble.

[itsjef]

Congratulations! The problem is gone now :smile: Thank you very much!

Time to update the repo then? :+1: