CODEWITHSUNDEEP
vue.jsvuejs2
tomato
tomato

Reputation: 39

I am looking for a way to use Vue props in a function

I am looking a way to use props in a function. Yet the console says Cannot read property 'props' of undefined How should I use props or pass the data to my function?

<template>
</template>

<script>
  import {db} from '../plugins/firebase';

  export default {
    name: "VueComponent",
    props: {
      for : String
    },
    data: () => ({
      thanks: [],
    }),
    firestore() {
      return {
        comments: db.collection('thanks').doc(this.props.for).orderBy('lookingAtMyPost');
      }
    },
  }
</script>

The error:

chat.js?id=217075c507b419bb0145:48071 Uncaught TypeError: Cannot read property 'props' of undefined
    at Module../node_modules/babel-loader/lib/index.js?!./node_modules/vuetify-

Upvotes: 0

Views: 36

Answers (1)

Dan Knights
Dan Knights

Reputation: 8368

You can access props like you can data properties, you don't have to do this.props.for you can just do this.for and it will work in the same way.

However, It's worth noting, you can't modify props directly in a child component, you'd have to emit an event for that.

From the Vue docs:

All props form a one-way-down binding between the child property and the parent one: when the parent property updates, it will flow down to the child, but not the other way around. This prevents child components from accidentally mutating the parent’s state, which can make your app’s data flow harder to understand.

In addition, every time the parent component is updated, all props in the child component will be refreshed with the latest value. This means you should not attempt to mutate a prop inside a child component. If you do, Vue will warn you in the console.

Read this article for more info on how to mutate props: https://www.telerik.com/blogs/how-to-emit-data-in-vue-beyond-the-vuejs-documentation

Upvotes: 1

Related Questions