N
Nuxt•6mo ago
BobSty

Page wont redirect after parameter change

The order of my files is shown in the picture. I'm trying to have two url Parameters: http://localhost:3000/dashboard/324141341234134/2312341351234 The dashboard index.vue is there to choose the first element from which I want to put the id in my url (http://localhost:3000/dashboard/324141341234134), then there will be child components where the user can choose, the id of the chose element should also be displayed in the url (http://localhost:3000/dashboard/324141341234134/2312341351234) My problem is, that the second redirect wont actually open the [channelid].vue: 
</template>
  <NuxtLink :to="link" ><button>Server</button></NuxtLink>
</template>

<script>
export default {
  data() {
    return {
      link: "/dashboard/" + this.serverId + "/" + this.channelId
    }
  }
}
</script>
</template>
  <NuxtLink :to="link" ><button>Server</button></NuxtLink>
</template>

<script>
export default {
  data() {
    return {
      link: "/dashboard/" + this.serverId + "/" + this.channelId
    }
  }
}
</script>
The parameter is added in the url but the page remains the same. [channelid].vue only displayed if I refresh the page. Does anyone know why this happens or how I can change the behaviour?
No description
24 Replies
pyplacca
pyplacca•6mo ago
Where are you getting this.serverId and this.channelId from? Shouldn’t those be accessed from this.$route.params? Also, I think you mean .servId instead of .serverId since channelId is nested inside servId Which page is the code snippet from? channelId.vue?
BobSty
BobSty•6mo ago
The code is from the [serverId].vue Actually its passed through with this into a sub component: 
// [serverId].vue

<template>
    <navbar/>
    <ueberschrift ueberschrift="Server Name TODO"/>
    <channels :serverId="serverId"/>
    <fusszeile/>
</template>

<script>
import channels from '/components/pages/dashboard/channels.vue'

export default {
    data() {
        return {
            serverId: this.$route.params.serverId
        }
    },
    components: {
        channels,
    }
}
</script>
// [serverId].vue

<template>
    <navbar/>
    <ueberschrift ueberschrift="Server Name TODO"/>
    <channels :serverId="serverId"/>
    <fusszeile/>
</template>

<script>
import channels from '/components/pages/dashboard/channels.vue'

export default {
    data() {
        return {
            serverId: this.$route.params.serverId
        }
    },
    components: {
        channels,
    }
}
</script>
And then passed further via props, the channelId depends on the button which the user clicks in the component those are the sub components 
// channels.vue

<style lang="css" scoped>
@import "/css/components/pages/dashboard/channels.css";
</style>

<template>
    <div class="channels">
        <div v-for="(channel) in dummyChannels">
            <channel :channelName="channel.channelName" :channelId="channel.channelId" :serverId="serverId"/>
        </div>
        <createchannel channelName="New Creator Channel" :serverId="serverId" channelId="TODO"/>
    </div>
</template>

<script>
import channel from '/components/pages/dashboard/channel.vue'
import createchannel from '/components/pages/dashboard/createchannel.vue'

export default {
    data(){
        return{
            dummyChannels: [
                { channelName: "Channel1", channelId: '2312341351234' },
                { channelName: "Channel2", channelId: '3412341223531' },
                { channelName: "Channel3", channelId: '3154134233455' },
                { channelName: "Channel4", channelId: '2312341351234' },
                { channelName: "Channel5", channelId: '3412341223531' },
                { channelName: "Channel6", channelId: '3154134233455' }
            ]
        }
    },
    props: {
        serverId: String,
    },
    components: {
        channel,
        createchannel
    }
};
</script>
// channels.vue

<style lang="css" scoped>
@import "/css/components/pages/dashboard/channels.css";
</style>

<template>
    <div class="channels">
        <div v-for="(channel) in dummyChannels">
            <channel :channelName="channel.channelName" :channelId="channel.channelId" :serverId="serverId"/>
        </div>
        <createchannel channelName="New Creator Channel" :serverId="serverId" channelId="TODO"/>
    </div>
</template>

<script>
import channel from '/components/pages/dashboard/channel.vue'
import createchannel from '/components/pages/dashboard/createchannel.vue'

export default {
    data(){
        return{
            dummyChannels: [
                { channelName: "Channel1", channelId: '2312341351234' },
                { channelName: "Channel2", channelId: '3412341223531' },
                { channelName: "Channel3", channelId: '3154134233455' },
                { channelName: "Channel4", channelId: '2312341351234' },
                { channelName: "Channel5", channelId: '3412341223531' },
                { channelName: "Channel6", channelId: '3154134233455' }
            ]
        }
    },
    props: {
        serverId: String,
    },
    components: {
        channel,
        createchannel
    }
};
</script>
// channel.vue

<style lang="css" scoped>
@import "/css/components/pages/dashboard/channel.css";
</style>

<template>
    <div class="channel">
        <div class="channel-name">
            <h2>{{ channelName }}</h2>
            <p>{{ channelId }}</p>
        </div>
        <div class="edit-button">
            <NuxtLink :to="link" ><button>Edit</button></NuxtLink>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            link: "/dashboard/" + this.serverId + "/" + this.channelId
        }
    },
    props: {
        channelName: String,
        channelId: String,
        serverId: String
    }
};
</script>
// channel.vue

<style lang="css" scoped>
@import "/css/components/pages/dashboard/channel.css";
</style>

<template>
    <div class="channel">
        <div class="channel-name">
            <h2>{{ channelName }}</h2>
            <p>{{ channelId }}</p>
        </div>
        <div class="edit-button">
            <NuxtLink :to="link" ><button>Edit</button></NuxtLink>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            link: "/dashboard/" + this.serverId + "/" + this.channelId
        }
    },
    props: {
        channelName: String,
        channelId: String,
        serverId: String
    }
};
</script>
pyplacca
pyplacca•6mo ago
You’d want to use a computed value for the serverId Set the serverId in the computed properties instead so that reactivity isn’t lost
BobSty
BobSty•6mo ago
Alright I'll try to figure that out, thanks for your advice
pyplacca
pyplacca•6mo ago
reactivity on the serverId is lost when you do this. So further updates to the route params do not re-render the component. 
export default {
  data() {
    return {
      serverId: this.$route.params.serverId
    }
  },
}
export default {
  data() {
    return {
      serverId: this.$route.params.serverId
    }
  },
}
what you instead want to do is this 
export default {
  computed: {
    serverId() {
      return this.$route.params.serverId
    }
  },
  ...
}
export default {
  computed: {
    serverId() {
      return this.$route.params.serverId
    }
  },
  ...
}
BobSty
BobSty•6mo ago
I've changed the files now: 
// [serverId].vue

<template>
    <navbar/>
    <ueberschrift ueberschrift="Server Name TODO"/>
    <channels :serverId="serverId"/>
    <fusszeile/>
</template>

<script>
import channels from '/components/pages/dashboard/channels.vue'

export default {
    computed: {
        serverId() {
            return this.$route.params.serverId
        }
    },
    components: {
        channels,
    }
}
</script>
// [serverId].vue

<template>
    <navbar/>
    <ueberschrift ueberschrift="Server Name TODO"/>
    <channels :serverId="serverId"/>
    <fusszeile/>
</template>

<script>
import channels from '/components/pages/dashboard/channels.vue'

export default {
    computed: {
        serverId() {
            return this.$route.params.serverId
        }
    },
    components: {
        channels,
    }
}
</script>
// [channelId].vue

<template>
    <navbar/>
    <channeledit channelName="Channel1" :channelId="channelId" :serverId="serverId" />
    <fusszeile/>
</template>

<script>
import channeledit from '/components/pages/dashboard/channeledit.vue'
export default {
    computed: {
        serverId() {
            return this.$route.params.servId
        },

        channelId() {
            return this.$route.params.channelId
        }
    },
    components: {
        channeledit,
    }
}
</script>
// [channelId].vue

<template>
    <navbar/>
    <channeledit channelName="Channel1" :channelId="channelId" :serverId="serverId" />
    <fusszeile/>
</template>

<script>
import channeledit from '/components/pages/dashboard/channeledit.vue'
export default {
    computed: {
        serverId() {
            return this.$route.params.servId
        },

        channelId() {
            return this.$route.params.channelId
        }
    },
    components: {
        channeledit,
    }
}
</script>
But its still not redirecting the page to the [channelId].vue
pyplacca
pyplacca•6mo ago
based on your directory structure, this isn't going to work 
// [serverId].vue
...
// [serverId].vue
...
you're prolly in the wrong file [servId].vue happens to be the parent of [channelId].vue. whereas [serverId].vue is where you're making the changes (based on the first code snippet) which isn't related to [channelId].vue the way I see it the [servId] page doesn't exist
BobSty
BobSty•6mo ago
Yeah so the [servId] folder is the there to make the two URL parameters possible, if I name the folder [serverId] then the code wont work at all. Its currently working after a refresh.
pyplacca
pyplacca•6mo ago
that's interesting. what's your url looking like in the address bar?
BobSty
BobSty•6mo ago
This one? http://localhost:3000/dashboard/324141341234134/2312341351234 Its basically if I call http://localhost:3000/dashboard/324141341234134/ then the [serverId].vue component is redirected and if I press the button there which should redirect me to the [channelId].vue then the url looks like this http://localhost:3000/dashboard/324141341234134/2312341351234 but its not redirecting. However if I refresh the page now then the [channelId].vue component is displayed
pyplacca
pyplacca•6mo ago
okay. gimme a moment
BobSty
BobSty•6mo ago
sure
pyplacca
pyplacca•6mo ago
BobSty
BobSty•6mo ago
How does stackblitz work? There is only a 404 Page for me
No description
BobSty
BobSty•6mo ago
Ill try to implement your code into mine
pyplacca
pyplacca•6mo ago
The window on the right is the preview screen. You can change the url in the address bar there
BobSty
BobSty•6mo ago
I've changed the order of the files to following now: 
- pages
-- dashboard
--- [serverId]
---- index.vue
---- [channelId]
----- index.vue
- pages
-- dashboard
--- [serverId]
---- index.vue
---- [channelId]
----- index.vue
I also changed it here: https://stackblitz.com/edit/github-ho2su4-dhgfkw?file=pages%2Fdashboard%2Findex.vue,components%2Fserver.vue,pages%2Fdashboard%2F[serverId]%2Findex.vue,pages%2Fdashboard%2F[serverId]%2F[channelId]%2Findex.vue,components%2Fservers.vue,components%2Fchannels.vue,components%2Fchannel.vue But the behaviour did not change I'm a little bit lost, I dont get where my mistake is
pyplacca
pyplacca•6mo ago
aaah I see what you're trying to achieve. will suggest a few changes soon
BobSty
BobSty•6mo ago
thanks
pyplacca
pyplacca•6mo ago
here you go
StackBlitz
Nuxt - Starter (forked) - StackBlitz
Create a new Nuxt project, module, layer or start from a theme with our collection of starters.
BobSty
BobSty•6mo ago
There is a index.vue file, I just did'nt mention it
No description
BobSty
BobSty•6mo ago
Ah yeah you are right Ill try it tomorrow, thanks in advance I realized that there is an error in the code... which is only thrown on redirect, not thrown on refresh.... so thats why it did not work lol. I just wasted about 3 days for a fricking semicolon in the html code After removing the the semicolon, the code works flawless I hate myself rn
pyplacca
pyplacca•6mo ago
Hahaa. It happens
<Mike/>
<Mike/>•6mo ago
You should not at all. It happens often. 😊 Whenever you are unable to redirect to a page manually and everything looks fine, there's probably an error in that page.vue blocking navigation
Want results from more Discord servers?
Add your server