Превращение Vue параметров маршрута в целые числа - PullRequest
Новая
       42

Превращение Vue параметров маршрута в целые числа

0 голосов
/ 04 апреля 2020

Я хотел создать свое портфолио с Vue. Я застрял с попыткой превратить параметры маршрута из строки в идентификатор.

На домашней странице перечислены элементы моего портфеля (выполняются все эти данные c, используются объекты данных, а не из базы данных). Когда вы нажимаете на них, параметры маршрута берут свой идентификатор и направляют в / портфолио / 1, / портфолио / 2 и т. Д. Затем эта страница динамически изменяется в соответствии с данными этого объекта.

На этой странице также есть нумерация страниц (следующий проект и предыдущий проект). Поскольку я использую их идентификатор в качестве параметра, я хотел увеличить или уменьшить идентификатор при щелчке, чтобы он приводил к следующему или предыдущему проекту, но я обнаружил, что параметры читаются как строка, а не как целое число, что приводит к с / портфолио / 11 или / портфолио / 21.

Как я могу это реализовать?

Код, который я пробовал до сих пор, выглядит следующим образом: 

<router-link :to="{ name: 'Project', params: { id: `${previousFolio}` } }">
   <b-button class="project-nav-button">
      <img src="@/assets/icon-arrow-back.svg" alt="previous project button" class="previous"/>
      <p>Previous Project</p>
   </b-button>
</router-link>

<router-link :to="{ name: 'Project', params: { id: nextFolio } }">
   <b-button class="project-nav-button">
      <p>Next Project</p>
      <img src="@/assets/icon-arrow-next.svg" alt="next project button" class="next"/>
   </b-button>
</router-link>

data() {
    return {
        folioId: this.$route.params.id,
        folios: [
        {
            id: 1,
            title: "Project Title 1"
        },
        {
            id: 2,
            title: "Project Title 2"
        },
        {
            id: 1,
            title: "Project Title 3"
        }
        ]
     };
  },

computed: {
        currentFolio: function() {
            let folioId = this.$route.params.id;
            return this.folios.filter(function (folio) {
                return folio.id == folioId;
        })
        },

        nextFolio: function() {
             let currentFolioId = this.$route.params.id;
             currentFolioId = parseInt(currentFolioId);
             return currentFolioId++;
             console.log(currentFolioId);
        },

        previousFolio: function() {
             let folioId = this.$route.params.id;
             return folioId--;
        },

1 Ответ

2 голосов
/ 04 апреля 2020

Просто используйте parseInt(), чтобы преобразовать его в целое число 

let folioId = parseInt(this.$route.params.id);
...