Как можно извлечь теги поста из REST API WordPress при работе с Vue 3?

Question

Naomi

vue

Как можно извлечь теги поста из REST API WordPress при работе с Vue 3?

Как можно создать дополнительный цикл внутри имеющегося цикла шаблона для получения тегов по каждому посту? J'ai essayé de réaliser une fonction distincte pour obtenir les tags de chaque post, mais cela n'a pas fonctionné dans la boucle v-for.

13 августа 2024 г. 8:13

Ответы на вопрос 1

Похожие вопросы

Answer 1

Вот пример того, как можно получить теги поста из REST API WordPress при работе с Vue 3 и создать дополнительный цикл внутри имеющегося цикла шаблона:


```javascript
<template>
  <div>
    <div v-for="post in posts" :key="post.id">
      <h2>{{ post.title.rendered }}</h2>
      <p>{{ post.content.rendered }}</p>
      <ul>
        <li v-for="tag in getPostTags(post.id)" :key="tag.id">
          {{ tag.name }}
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      posts: [],
      tags: []
    };
  },
  mounted() {
    this.getPosts();
  },
  methods: {
    async getPosts() {
      try {
        const response = await fetch('https://example.com/wp-json/wp/v2/posts');
        this.posts = await response.json();
      } catch (error) {
        console.error(error);
      }
    },
    async getPostTags(postId) {
      try {
        const response = await fetch(`https://example.com/wp-json/wp/v2/tags?post=${postId}`);
        return await response.json();
      } catch (error) {
        console.error(error);
        return [];
      }
    }
  }
};
</script>
```

В этом примере используется метод `getPosts`, чтобы получить список постов из REST API WordPress. Для каждого поста вызывается метод `getPostTags`, который получает теги для данного поста. Затем внутри шаблона создается дополнительный цикл для отображения тегов каждого поста.

Обратите внимание, что вам нужно заменить `https://example.com/wp-json/wp/v2/posts` и `https://example.com/wp-json/wp/v2/tags` на соответствующие эндпоинты вашего WordPress сайта.