Как передать параметр из роутера в дочерний компонент при загрузке страницы?

Question

[AleDv]

Всем привет. Есть родительский компонент, в котором размещён дочерний компонент, в который необходимо передать параметр из ткущего урла (vue-router).

<template>
<favorite-button :userid="userid"/>
</template>
...
<script>
...
mounted() {
    this.userid = this.$route.params.id;
}
...
</script>

Проблема в том, что при загрузке родительского компонента в favorite-button прилетает undefined, вместо заданного в урле id.

Как пофиксить эту проблему?

Comments

[Александр]

this.

убрать пробовали?

Answer 1

[Константин Б.]

Нельзя использовать this внутри шаблона компонентов это раз. Второе это то что аттрибут id это аттрибут html и его нельзя использовать как props, замените на route-id например.

И вообще эта передача бессмыслена, так как получить параметр можно и внутри

Comments

[AleDv]

1. Почему?
2. Пример - это псевдокод.
3. Можно, но я не хочу гвоздями прибиваться к роутеру. Нужно, чтобы параметр приходил извне.
4. Есть идеи как решить главный вопрос из топика?

[Константин Б.]

AleDv, зачем вы написали эту хрень мне? Я вам все написал уже. Делайте так как написано и будем смотреть. Указали в дочернем компоненте какие props к нему придут?

За псевдокод в вопросе вас покарают боги. Всегда пишите тот код который у вас есть

[AleDv]

Константин Б., ок, с вами ясно.

[Aetae]

AleDv, первая часть ответа правильная, никакого this в шаблонах:

<template>
 <child-component :id="$route.params.id"/>
</template>

А по поводу того что id есть в html - это фигня. В html есть 100500 атрибутов, нет никаких проблем их юзать в Vue. Проблема может быть разве что если вы захотите назначить настоящий html id, а пропс уже занят и придётся что-то шаманить, но это крайне маловероятно.

[AleDv]

Aetae, проблема немного в другом, что на момент отрисовки родительского компонента, в child-component прилетает undefind, хотя в родителе на хуке mounted $route.params.id равен переданному в урл id

[Aetae]

AleDv, сделай пример где это так. В нормальном коде вс1 нормально работает:

[Константин Б.]

Aetae,

А по поводу того что id есть в html - это фигня.

Это не фигня, это здравый смысл, зачем юзать тег который для другого нужен. Вдруг потом какой-то нейтив код на элемент по ID навешать придется или еще что. Можно много вариантов использовать вместо id

[AleDv]

Aetae, добавил в описание вопроса реальный кусок кода. В моём случае в favorite-button прилетает undefined.

[Aetae]

Константин Б., накрайняк можно разок написать универсальную директиву и через неё оверрайдить html аттрибуты. На деле таких проблем у меня не возникало никогда. Потому что то что написано на vue остаётся в vue и нет никакого смысла в html атрибутах, не предусмотренных компонентом. Зачем писать лишний код?

AleDv, вот - другое дело. Проблема абсолютно очевидна. Шаблон рендерется после created и до mounted, на mounted шаблон уже примонтирован в dom и все переменные давно взял и обработал, а ты их только присваиваешь.

Если тебе не нравится длинный путь к переменной - используй computed. Если переменная не должна обновляться при изменении - фигач в created.

[AleDv]

Aetae, спасибо! Запутался в хуках.