The goal is to parse route params, find the item in the store (by param from the URL), and write some item's properties to the raw HTML with Vue 2 SSR:
<template>
<div :class="$style.issue">
<div>
<div>{{ issue.title }}</div> <!-- not rendered by the server, only on the FE -->
<a :href="issue.url">{{ issue.url }}</a> <!-- not rendered by the server, only on the FE -->
</div>
</div>
</template>
This is how I'm trying to access the issue:
<script>
import { createNamespacedHelpers } from 'vuex';
const { mapState } = createNamespacedHelpers('issues');
export default {
computed: {
...mapState({
issues: state => state.issues,
}),
issue() {
return this.issues.find((issue) => issue.id == this.$route.params.id);
// I believe something is wrong with this.$route.params,
// probably it's not there while doing SSR
}
}
}
</script>
The store is ready, I can see it in the pagesource. What am I doing wrong? Thanks.