Question

我将一个对象作为道具传递给子组件，但是我无法引用该子组件中的一个元素（user_id）在该子组件的方法中使用。

我的代码（略略）是：

<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>

在模板中显示正确信息的同时，我还需要能够将令牌中的用户ID与prop中包含的ID（即data.user_id）进行比较。我的阅读建议解决方案将涉及将对象转换为数组，但这也超出了我目前的技能水平。我希望能找到一些解决方案的指针。

谢谢，汤姆

Answer 1

如果您可以在模板中呈现data.user_id，则可以在任何地方使用它，但我可能会这样做，以解决您的问题：

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

然后您的v-if可能就是这个：

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

在Vue子组件中的道具中提取信息

1 个答案: