Как передать нужные данные зависимо от router?

Question

[Darkness]

Как правильно реализовать данны в такой ситуации. На скрине: Таких плашек может быть много. Сейчас это массив из state и все выглядит красиво, их может быть больше или меньше. Проблема в том, что на каждую плашку можно нажать и перейти, скажем, в проект ( т.е. у каждой плашки есть внутри данные)
Переход сделал по id:

router-link(:to="`/project/${project.id}`" :project="project"  v-for="project in item.projects" :key="project.title")

Сейчас при нажатие на плашку у каждой свой роут = project/:id

Вопрос: Как мне лучше/правильно передать данные, например, чтобы при нажатие показывались данные только этой плашки ( как ID) ?

Скрин:

Answer 1

[0xD34F]

Данные уносите в vuex, параметр роута пробрасываете в компонент, в компоненте делаете вычисляемое свойство, где по id будете доставать из хранилища нужный объект.

Comments

[Darkness]

Т.е. данные этих плашек создаем в state, у каждых данных есть id, если id роута равны id данных, показываем? Я думал, чтобы было более правильно, по нажатию должны сразу браться title ( например, ООО "Проект"), а не свои записи ( в ручную прописанные в state плашки)

[0xD34F]

Darkness, из того, что вы сказали, я не понял ничего. Попробуйте ещё раз.

[Darkness]

0xD34F, Хорошо) Как я понимаю ваш ответ:
1) в router.js мы говорим компоненту где отрисовываем по фильтру - props: true
2) в router-link мы передаем в путь id нажатой плашки (чтобы в url он был как project/id), я пытался передать в router-link params, а именно хотел передавать id,

:to="`/project/${project.id}`, <b>params: {id: project.id}}</b>

но ошибка :

invalid expression: Unexpected token : in
 `/project/${project.id}`, params: {{id: project.id}} }
 Raw expression: :to="`/project/${project.id}`, params: {{id: project.id}} }"

которая не позволяет передать данные. Где именно я не верно передаю параметр ?
3) После передачи id мы получаем из нового массива данные плашки с id и если id верны ( тот который передали и из state) уже в computed свойстве отдаем и мы показываем данные
Верно понимаю?

[0xD34F]

Darkness,

:to="`/project/${project.id}`"

[Darkness]

0xD34F, У меня так было изначально, я не знаю как проверить в компоненте.
Предпологаю:
this.$router.prams.id
Но ошибка, что не находит router
Cannot read property 'id' of undefined"

Мне кажется, я не выполняю вот это:
"параметр роута пробрасываете в компонент"

UPD

Ошибку понял:
Правильно вот так:
this.$route.params

[Darkness]

0xD34F, Хорошо, теперь, я не могу найти свою ошибку, он просто не проверяет, но я уверен что свойство работает, т.к. если вернем массив в else, тогда все работает.

filtered(){
            if(this.$route.params == this.getProject.id) {
                return this.getProject
            } else {
                return alert("нененен")
            }
        }

[Darkness]

0xD34F, то что вы советуйте, не срабатывает
this.$router.prams.id
выдает ошибку Cannot read property 'id' of undefined"
То, что не может проверить
this.$route.params

[0xD34F]

Darkness, а что, я должен знать, что такое getProject? Интересно, откуда? Вы наверное удивитесь, но телепатии не существует.

[0xD34F]

Darkness,

не срабатывает

[смеётся]

А у меня срабатывает.

[Darkness]

0xD34F, Так дело же не в этом. Это просто getter из state, у которого есть id, его я получаю. Тут дело именно в передаче, он просто не видит параметр роута. Я пытаюсь сделать как по доке, но как видите, столкнулся с ошибками.

[0xD34F]

Darkness,

Так дело же не в этом.

Правильно, побольше информации скрывайте - так ваша проблема быстрее решится.

Почему сравниваете id с params (это, если что, объект)?

[Darkness]

0xD34F, Хорошо.
Router.js

{
          path: '/project/:id',
          name: 'project',
          component: Project,
          props: true
}

Компонент, где router -link

router-link(:to="`/project/${project.id}`" v-for="project in item.projects"

Компонент, где нужно проверить id
где this.getProject - это простой геттер из state и котором есть id и покоторому хочу проверять.

export default {
    name: 'Project',
    data() {
        return {

        }
    },
    computed: {
        ...mapGetters({
            getProject: 'desktop/getProject'
        }),
        filtered(){
            if(this.$router.prams.id== this.getProject.id) {
                return this.getProject
            } else {
                return alert('1')
            }
        }
    },
    mounted() {
        /*eslint-disable*/
        console.log(this.getProject)
    }
}

Итог: "TypeError: Cannot read property 'id' of undefined", геттер срабатывает.

[0xD34F]

Darkness,

this.$router.prams.id

$route.params

Вы вроде бы выше уже писали, что поняли как правильно. Так какого чёрта повторяете этот косяк?

[Darkness]

0xD34F, Да, благодаря вам я понял свою ошибку и запомнил её. Я пытался сравнить id с массивом, не перебрав его.
Но опять же уперся в ошибку. В консоли выдает i.id = 12 ( id из state) и 12 - id страницы. НО выходит ошибка " Cannot read property 'id' of undefined""

Это computed
  return this.getProject.map(i => {
                this.$route.params == i.id
                console.log(i.id)
            })

UPD
Тут проверка возвращает alert("1")
Если params без .id, тогда alert('2")

if(this.$route.params.id == i.id) {
                    alert('1')
                } else {
                    alert('2')
                }
                // this.$route.params == i.id
                console.log(i.id)
            })

[0xD34F]

Darkness,

Почему опять пытаетесь сравнивать params с id?

Сколько объектов должен отображать компонент? Из текста вопроса следует, что один. Тогда почему map? Вы не знаете что делает map или наврали насчёт компонента?

Почему коллбек map'а ничего не возвращает? Вы не знаете, что делает map (да, точно - не знаете)?

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