Laravel 5.3和Vue 2

问题描述：

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?

我正在使用新的Laravel 5.3应用程序玩Vue 2，我不知道如何绑定 laravel格式的URL。 p>

我从数据库中提取了一些配置行，我想简单地循环显示数据，然后显示一个按钮，将您带到编辑屏幕。 Vue不支持简单地在URL中插入配置行的ID，因为我使用以下方法在行上循环： p>

 ＆lt; tr v-for =“config in data”  ＆gt; 
＆lt; td＆gt; 
＆lt; a href =“/ configurations / {{config.id}} / edit”＆gt; {{config.name}}＆lt; / a＆gt; 
＆lt; / td＆gt;  
＆lt; / tr＆gt; 
  code>  pre> 
 
  Vue文档说要绑定到另一个函数，如下所示： p> 
 
 
 ＆lt  ;一个v-bind：href =“url”＆gt; 
  code>  pre> 
 
 然后我有一个像这样定义的url方法： p> 
 
   export default {
 mounted（）{
 console.log（'Component ready。'）
}，
 data：function（）{
 return {
 data：[config data array  ] 
} 
}，
计算：{
 url：function（）{
 console.dir（this）;  //整个组件，而不是行
 console.dir（this.id）;  // undefined 
 console.dir（this.config）;  // undefined 
返回“/ configurations /”+ this.config.id +“/ edit”//抛出错误
} 
} 
} 
  code>  pre> 
 
 我似乎无法获取返回的URL进行渲染，它通常会抛出错误或抱怨我的var未定义。 p> 
 
 
如何完成此（简单）任务？   p> 
  div>

答

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

Laravel 5.3和Vue 2

相关推荐