I've been experimenting with learning Vue.js 2 and routing, and I'm puzzled by a specific issue. Whenever I navigate to routes other than the home ('/') route, the localhost URL is somehow added to the API calls. Here's an example of what happens:
const url = `'https://www.reddit.com/r/'${ this.sub }/.json?limit=10'`; // this.sub represents the subreddit string
This results in a URL like:
'http://localhost:5000/subreddits/politics/https://www.reddit.com/r/politics/.json?limit=10'
Here is the code snippet causing the problem:
<script>
export default {
data() {
return {
sub: this.$route.params.sub,
posts: [],
}
},
watch: {
'$route'(to, from) {
this.sub = to.params.sub;
}
},
methods: {
fetchPosts: async function () {
const url = `'https://www.reddit.com/r/'${ this.sub }/.json?limit=10'`;
try {
const res = await (await fetch(url)).json();
this.posts = await (res.data.children);
} catch(err) {
console.error(err);
}
}
},
mounted() {
this.fetchPosts();
},
}
</script>