Laravel 5.3和Vue 2

Question

I'm playing with Vue 2 in a new Laravel 5.3 app, and I'm not sure how to bind a URL in the laravel format.

I have some config rows pulled from a DB, and I want to simply loop over them displaying the data, and then present a button to take you to an edit screen. Vue doesn't support simply interpolating the config row's ID in the URL as I'm looping over the rows using:

<tr v-for="config in data">
  <td>
    <a href="/configurations/{{ config.id }}/edit">{{ config.name }}</a>
  </td>
</tr>

The Vue docs say to bind to another function like this:

<a v-bind:href="url">

and then I have a url method defined like this:

export default {
    mounted() {
        console.log('Component ready.')
    },
    data: function () {
        return {
            data: [config data array]
        }
    },
    computed: {
        url: function () {
            console.dir(this); // the whole component, not the row
            console.dir(this.id); // undefined
            console.dir(this.config); // undefined
            return "/configurations/" + this.config.id + "/edit" // throws error
        }
    }
}

I can't seem to get the returned URL to render, it normally either throws an error or complains that my var is undefined.

How do I complete this (simple) task?

Answer 1

The solution was to ignore the computed URL function and just do the following: <a :href="'/configurations/' + config.id + '/edit'">