Fixed issue #47

app/controllers/api/v1/talks_controller.rb

@@ -5,7 +5,7 @@ class TalksController < ApplicationController
       respond_to :json
 
       def show
-        talk = Talk.find_by(slug: params[:slug])
+        talk = Talk.joins(:conference).where(conferences: {slug: params[:conference_slug]}).find_by(slug: params[:slug])
         x = {
           title: talk.title,
           slug: talk.slug,

app/javascript/components/Conference.vue

@@ -50,7 +50,7 @@
       <section class="talks-grid">
         <article class="talk" v-for="talk in conference.talks" :key="talk.id">
           <div class="video">
-            <router-link :to="{ name: 'Talk', params: { slug: talk.slug } }">
+            <router-link :to="{ name: 'Talk', params: { conference_slug: conference.slug, talk_slug: talk.slug } }">
               <img :alt="talk.title" :src="talk.video_thumbnail" :title="talk.title">
             </router-link>
           </div>
@@ -78,7 +78,7 @@
                   >{{ speaker.name }}</router-link>
                 </p>
                 <h1 class="title">
-                  <router-link :to="{ name: 'Talk', params: { slug: talk.slug } }">{{ talk.title }}</router-link>
+                  <router-link :to="{ name: 'Talk', params: { conference_slug: conference.slug, talk_slug: talk.slug } }">{{ talk.title }}</router-link>
                 </h1>
               </div>
             </header>

app/javascript/components/Speaker.vue

@@ -19,7 +19,7 @@
       <section class="talks-grid">
         <article class="talk" v-for="talk in speaker.talks" :key="talk.slug">
           <div class="video">
-            <router-link :to="{ name: 'Talk', params: { slug: talk.slug } }">
+            <router-link :to="{ name: 'Talk', params: { conference_slug: talk.conference.slug, talk_slug: talk.slug } }">
               <img :alt="talk.title" :src="talk.video_thumbnail" :title="talk.title">
             </router-link>
           </div>
@@ -41,7 +41,7 @@
                   >{{ talk.conference.title }}</router-link>
                 </p>
                 <h1 class="title">
-                  <router-link :to="{ name: 'Talk', params: { slug: talk.slug } }">{{ talk.title }}</router-link>
+                  <router-link :to="{ name: 'Talk', params: { conference_slug: talk.conference.slug, talk_slug: talk.slug } }">{{ talk.title }}</router-link>
                 </h1>
               </div>
             </header>

app/javascript/components/Talk.vue

@@ -60,10 +60,11 @@ export default {
     };
   },
   created() {
-    var slug = this.$route.params.slug;
-    axios.get("/api/v1/talks/" + slug).then(response => {
-      this.talk = response.data;
+    var conference_slug = this.$route.params.conference_slug;
+    var talk_slug = this.$route.params.talk_slug;
 
+    axios.get("/api/v1/conferences/" + conference_slug + "/talks/" + talk_slug).then(response => {
+      this.talk = response.data;
 
       setTimeout(function(){
         new Carousel({

app/javascript/router.js

@@ -42,7 +42,7 @@ export default new Router({
       component: Speaker
     },
     {
-      path: '/talks/:slug',
+      path: '/conferences/:conference_slug/talks/:talk_slug',
       name: 'Talk',
       component: Talk
     }

config/routes.rb

@@ -21,8 +21,9 @@
 
   namespace :api, defaults: {format: :json} do
     namespace :v1 do
-      resources :conferences, only: [:index, :show], param: :slug
-      resources :talks, only: [:show], param: :slug
+      resources :conferences, only: [:index, :show], param: :slug do
+        resources :talks, only: [:show], param: :slug
+      end
       resources :speakers, only: [:index, :show], param: :slug
     end
   end