<template> <router-link v-if="$props.link" :to="{ path: `/u/${userIdMap['Z' + $props.userId]}` }" > {{ userIdMap["Z" + $props.userId] }} </router-link> <span v-else> {{ userIdMap["Z" + $props.userId] }} </span> </template> <script> import { mapState, mapActions } from "vuex"; export default { components: {}, props: ["userId", "link"], data() { return {}; }, computed: { ...mapState("user/userIdMap", { userIdMap: state => state.userIdMap }) }, methods: { ...mapActions("user/userIdMap", ["getUsernameFromId"]) }, mounted: function() { this.getUsernameFromId(this.$props.userId).then(() => { this.$forceUpdate(); }); } }; </script>