2016-10-13 10 views
2

新しいLaravel 5.3アプリでVue 2を使用しています.Laravel形式のURLをバインドする方法がわかりません。Laravel 5.3とVue 2

DBからプルされたいくつかの設定行があり、単純にデータを表示してループし、編集画面に移動するためのボタンを表示します。

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

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

Vueのドキュメントは、このような別の関数にバインドすると言う:私は使用して行をループてるようVueがURLに設定行のIDを補間するだけでは対応していません。その後、私はこのように定義されたURLの方法があります:私はレンダリングするために返されたURLを取得するように見えることはできません

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 
     } 
    } 
} 

を、それは通常のいずれかでエラーが発生しますか、私のvarが未定義であることを訴えます。

この(単純な)タスクをどのように完了すればよいですか?

答えて

3

解決策は、計算されたURL関数を無視し、次のようにします。<a :href="'/configurations/' + config.id + '/edit'">

関連する問題