Can't use {id} in parameter sent to event handler method when using UUID

[PascalAnimateur]

I'm using the following template for a delete button, which doesn't work as it should:

  templates: {
    delete: '<button @click="$parent.deleteClassified({id})" class="btn btn-xs btn-danger"><i class="glyphicon glyphicon-remove"></i></button>'
  }

And I can't get the id parameter to go through to my method, receiving the following error in the console:

Invalid expression. Generated function body: scope.$parent.deleteClassified({scope.id})

I can get the method to be called properly by removing the parameter, but this is useless for a delete button.

My complete vue-tables options look like this:

{
  compileTemplates: true,
  texts:{
    count:'{count} classifieds',
    limit:'# per page:',
    noResults:'No matching classifieds'
  },
  columns:['address', 'size', 'price'],
  headings: {
    address: 'Address',
    size: 'Size',
    delete: 'Delete'
  },
  templates: {
    delete: '<button @click="$parent.deleteClassified({id})" class="btn btn-xs btn-danger"><i class="glyphicon glyphicon-remove"></i></button>'
  }
}

And individual data records look like this:

  {
    "source": "Kijiji",
    "size": "4½",
    "price": 0,
    "address": "204 Rue du Val-des-Neiges, Beaupré, QC G0A 1E0",
    "postedAt": "2016-02-14T03:58:21.000Z",
    "url": "http://www.kijiji.ca/v-appartement-condo-4-1-2/ville-de-quebec/chalet-au-mont-st-anne/1034043903",
    "geoLocation": [
      -70.90793769999999,
      47.0622627
    ],
    "createdAt": "2016-02-14T04:08:11.267Z",
    "updatedAt": "2016-02-14T04:08:11.267Z",
    "id": "56bffdab167e504d681f1208"
  }

What am I doing wrong? I tried using @click="$parent.deleteClassified(id)" but got undefined back.

[PascalAnimateur]

Update: This is caused by id being UUID instead of integer. Is this something that would be easy to fix?

[matfish2]

Wrap the parameter with quotes
deleteClassified("{id}")

[PascalAnimateur]

Now I just receive the string "{id}" as a parameter to my method instead of the actual UUID value.

I've tried different ways (single quotes, escaping the quote, etc.) and still could not make this work.

Have you tried your solution? If so, could you provide a working jsfiddle please?
Wish I could be more helpful..

[PascalAnimateur]

Nevermind, I got it to work outsite my main project...

[PascalAnimateur]

It works for static records passed directly as an array in data attribute of the Vue instance, but not when loading the same data from a REST api in the ready function.

[matfish2]

Add v-if to the component so it won't compile until the data is returned from the API. Something like:

<v-client-table v-if='loaded'></v-client-table>

where loaded will be set to true in the callback handling the returned data.
Alternatively, you can call this.$compile(this.$el) to compile the templates when the data is ready.

[VitruxPT]

I did that but for some reason it doesn't work for me.
I added the v-if to only compile when the data is loaded but i still get an undefined when i try to use it with a button from my table.

My edit button:
<button type='button' class='btn btn-warning' href='javascript:void(0);' @click='$parent.Edit({viewer})'><i class='fa fa-pencil-square-o' aria-hidden='true'></i></button>

(Note: If i use an integer for example the id instead of viewer which is a string everything works and i get the id in the alert function.)

My Edit Function is just:
Edit: function (viewer) { alert(viewer); }

[matfish2]

See #93.