Я ищу способ использовать Vue props в функции

Question

Я ищу способ использовать props в функции. Тем не менее, консоль говорит: Cannot read property 'props' of undefined Как мне использовать реквизиты или передавать данные моей функции?

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

Ошибка:

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-

Answer 1

Вы можете получить доступ к реквизитам, как к свойствам данных, вам не нужно делать this.props.for, вы можете просто сделать this.for, и он будет работать таким же образом.

Однако стоит отметить , вы не можете изменять реквизиты непосредственно в дочернем компоненте, для этого вам нужно будет создать событие.

Из Vue docs:

Все реквизиты образуют односторонняя привязка между дочерним и родительским свойством: когда родительское свойство обновляется, оно переходит к дочернему, но не наоборот. Это предотвращает случайное изменение дочерними компонентами родительского состояния, что может затруднить понимание потока данных вашего приложения.

Кроме того, каждый раз при обновлении родительского компонента все свойства в дочернем компонент будет обновлен до последнего значения. Это означает, что вы не должны пытаться изменить опору внутри дочернего компонента. Если вы это сделаете, Vue предупредит вас в консоли.

Прочтите эту статью для получения дополнительной информации о том, как изменять свойства: https://www.telerik.com/blogs/how-to-emit-data-in-vue-beyond-the-vuejs-documentation