2

I am working on a project that uses Vue2 (2.5.3) along with Vue Tables 2. All I am trying to do is add an anchor around each row, as the linked example shows, and invoke the edit() function. However, it doesn't seem to fire at all and I am not getting any errors. Any idea why this is?

.vue file

  <template>
    <div class="col-md-8 col-md-offset-2">
        <div id="people">
            <v-client-table :data="tableData" :columns="columns">
                <template slot="edit" slot-scope="props">
                    <div>
                        <a class="fa fa-edit" :href="edit(props.row.id)"></a>
                    </div>
                </template>
            </v-client-table>
        </div>
    </div>
</template>

<script>
    import {ServerTable, ClientTable, Event} from 'vue-tables-2';
    import Vue from 'vue';
    import axios from 'axios';

    Vue.use(ClientTable, {
        perPage: 3
    }, false);

    export default {
        methods: {
          edit: function(id){
              console.log("OK", id);
          }
        },
        data() {
            return {
                columns: ['id','name','age'],
                tableData: [
                    {id:1, name:"John",age:"20"},
                    {id:2, name:"Jane",age:"24"},
                    {id:3, name:"Susan",age:"16"},
                    {id:4, name:"Chris",age:"55"},
                    {id:5, name:"Dan",age:"40"}
                ]
            };
        }
    }
</script>

<style lang="scss">
.VuePagination__count {
    display:none;
}
</style>
Matanya
  • 6,233
  • 9
  • 47
  • 80
AnchovyLegend
  • 12,139
  • 38
  • 147
  • 231

3 Answers3

1

The first problem I see is that there is no way that I can tell from the documentation to wrap an entire row the way you are proposing with a link. There are several pre-defined slots you can customize, and you can also use a slot for each column you pass into the columns property.

Templates allow you to wrap your cells with vue-compiled HTML. It can be used in any of the following ways:

Note that says cells. So you can provide a template for each individual cell by specifying the name of the column as the slot.

In your example, there is no edit column, so nothing is actually rendered.

You could add an edit column to columns:

columns: ['edit', 'id','name','age'],

And then your template would work; it would add the font awesome icon to a column in the table.

Here is an example.

Bert
  • 80,741
  • 17
  • 199
  • 164
  • Bert, Thanks for the help. What you're saying makes sense and works perfectly. However, I am trying to wrap the whole row in anchor or somehow link the row to a url on click. Any ideas? – AnchovyLegend Nov 16 '17 at 21:09
  • @AnchovyLegend Nope. I looked for some way to do that and could not see one. Well, I did see one way; you can provide and entirely custom template for the table. I think thats more than you want to do. – Bert Nov 16 '17 at 21:10
  • @AnchovyLegend Here is the part where they document how to specify a custom template. https://www.npmjs.com/package/vue-tables-2#register-the-components – Bert Nov 16 '17 at 21:11
  • Thanks Bert. Yeah, I saw that, however the docs are lacking. Not sure what should go inside the .js template file. – AnchovyLegend Nov 16 '17 at 21:12
  • @AnchovyLegend No argument there. That is, however, the only way I can think of that would work for what you want. – Bert Nov 16 '17 at 21:14
  • Thanks for the help @Bert. I ended up going with your suggestion. Would it be possible to overwrite and anchor all table cells, similar to how we did the newly create edit cell, with the `edit(props.row.id)`? Essentially making the whole row anchored? i.e `{{props.row.first_name}}` – AnchovyLegend Nov 16 '17 at 21:45
  • @AnchovyLegend You could do something like this: https://codesandbox.io/s/2w9yr55xmn – Bert Nov 16 '17 at 21:50
  • Thanks Bert, that seem to add the anchor to all columns, although it seems to break template functions, i.e. ```templates: { created_at: function(row) {``` – AnchovyLegend Nov 16 '17 at 22:09
0

You can use the vue-tables.row-click event. E.g:

Event.$on('vue-tables.row-click', (row) => {
    location.href = "/path/to/asset/" + row.id + "/edit";
});

See Linking a row in a table to a url

Matanya
  • 6,233
  • 9
  • 47
  • 80
-2

Dont use the href on the anchor tag to trigger your click event. Do it like this

<a class="fa fa-edit" href="#" v-on:click="edit(props.row.id)"></a>

Also, the way you had it with :href="edit(props.row.id)" vue is trying to bind a value to your href attribute. But what you are calling is a function that is not returning any value. I wonder if you check the developers console you might get an error related to compiling the template. Anyways ":" means bind, and i dont think binding is what you want to do here.

victor
  • 802
  • 7
  • 12