Extracting the information in a prop in a Vue child component

Question

I'm passing a object as a prop to a child component but I can't reference one of its elements (user_id) to use in a method in that child component.

My code (slightly abbreviated) is:

<template>
<div class="back">
    <v-app id="inspire">
        <v-content>
            <v-container fluid>
                <v-card flat>
                    <v-card-title>
                        <div>
                            <div class="headline">
                                {{data.title}}
                            </div>
                            <span class="grey--text">{{data.user}} said {{data.created_at}}</span>
                        </div>
                        <v-spacer></v-spacer>
                        <v-badge color="deep-orange accent-3" left overlap>
                            <span slot="badge">7</span>
                            <v-icon color="grey lighten-1" large>
                                insert_comment
                            </v-icon>
                        </v-badge>
                        <!--<v-btn color="deep-orange accent-3">5 replies</v-btn>-->
                    </v-card-title>
                    <v-card-text v-html="data.body"></v-card-text>

                    <v-card-actions v-if="own">
                        <v-btn icon small>
                            <v-icon color="deep-orange accent-3">edit</v-icon>
                        </v-btn>
                        <v-btn icon small>
                            <v-icon color="red">delete</v-icon>
                        </v-btn>
                    </v-card-actions>
                </v-card>
                <return-button></return-button>
            </v-container>
        </v-content>
    </v-app>
</div>
</template>

<script>
  export default {
    name: "ShowQuestion",
    props: ['data'],
    data() {
      return {
        own: this.Own(),
      }
    },
    methods: {
      Own: function () {
        return this.UserID() == this.user_id  <---HERE BE DRAGONS! (reported as 'undefined')
      },
      UserID: function () {
       ... returns the 'sub' from the JWT token
        return sub;

      }
    },
  }
</script>

While the correct information is being displayed in the template, I also need to be able to compare the user's ID from the token with that contained in the prop (i.e. data.user_id). My reading suggests the solution will involve converting the object to an array, but that's beyond my current skill level too. I'd appreciate some pointers to a solution.

Thanks, Tom

Answer 1

If you can render data.user_id in your template you can use it anywhere, but I'd probably do something like this to solve your problem:

props: ['data']
data() {
  return {
  }
},
computed: {
  UserId() {
    return //however you get your id
  }
},

Then your v-if could just be this:

<v-card-actions v-if="UserId === data.user_id">