Как получать динамические данные?

Question

[Владимир Кохан]

Делаю что-то типа блога. Как обычно - категории, по клике на какую-либо из них должны подтягиваться статьи из БД.
В принципе, все работает, но есть глюк - если кликнуть, например, на первую категорию, появляются статьи из первой категории, но если кликнуть тут же на вторую категорию - ничего не происходит, только адрес меняется.
Но если страницу обновить, то выводятся статьи из второй категории. Так же, если после клика на первую категорию перейти на главную страницу, а потом на вторую категорию, то все работает. Я так подозреваю, что происходит это от того, что для вывода статей я использую один и тот же компонент.
Подскажите, как с этим бороться.

Компонент вывода статей:

<div class="container">
      <div class="row">
          <div class="col-3">
              <h4 v-if="articles.length !== 0" v-for="article in articles">
                  {{ article.title}}
              </h4>
              <h4 v-else>
                  Нет ни одной записи
              </h4>
          </div>
          <div class="col-9"></div>
      </div>
  </div>

import axios from "axios";
export default {
    props: [
        'alias'
    ],

    data() {
        return {
            articles: [],
        }
    },

    methods: {
        async getArticles(alias) {
            await axios.get('/api/categories/' + this.alias)
                .then(response => {
                    this.articles = response.data;
                })
        }
    },
    mounted() {
        this.getArticles();
    }
}

Answer 1

[0xD34F]

Экземпляр компонента, отображающего статьи, не создаётся заново при смене категории, поэтому хук mounted не вызывается. Соответственно, метод getArticles не вызывается тоже - вот статьи и не обновляются.

Загружать новые данные следует не при монтировании компонента, а когда меняется значение параметра, представляющего категорию:

watch: {
  alias: {
    immediate: true,
    handler: 'getArticles',
  },
},

Comments

[Владимир Кохан]

Все отлично! Большое спасибо за помощь.