Опора отображается в инструментах Dev, но при использовании отображается неопределенная

Question

Я передаю простой идентификатор дочернему компоненту, но у меня есть неопределенная ошибка в журнале консоли, и я не могу использовать проп

Я передаю опору ребенку

<transactions v-show="active_tab == 2" :userId="affiliate.user_id"></transactions>

Который потом здесь у ребенка

props: ["userId"]

Тогда я просто пытаюсь консоль записать реквизит, вот так

console.log(this.userId);

Как видно из изображения, в Devtools появляется опора

Ошибка выглядит следующим образом

[Vue warn]: недопустимая проп: проверка типа не выполнена для проп "userId". Ожидаемая строка со значением "undefined", получена Undefined

Answer 1

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

как так

watch: {
    user_id() {
      console.log(this.user_id);
      this.fetch_transactions_data();
    }
  }

Answer 2

Попробуйте использовать вызов по шаблону так:

<transactions v-if="active_tab == 2" :user-id="affiliate.user_id"></transactions>

Компиляция vue может изменить реквизиты верблюда в шаблоне на строчные с дефисом.

Вы можете посмотреть документацию по этому поводу: https://vuejs.org/v2/guide/components-props.html#Prop-Casing-camelCase-vs-kebab-case