点击“最新帖子”侧边栏中的链接时，Vue博客更改呈现的帖子

我的爱好项目遇到了一个问题，我创建了一个BlogPost.vue，在其中呈现了之前从BlogPost.vue页面中单击的帖子。
在这个BlogPost中，我呈现了被点击的帖子的标题、内容等，在侧边栏中，我显示了一个小区域，在其中呈现了来自同一类别的3个最新帖子-来自Blog.vue的帖子。
当我点击侧边栏的链接时，浏览器会改变slug，页面会重新呈现，除了它会重新呈现被点击的帖子。如果我在浏览器中刷新页面（或Ctrl + R或F5等），它会呈现从侧边栏点击的正确内容。
我不知道它为什么这样做，我只能假设我应该看着路线的变化，然后以某种方式刷新它所呈现的，但不知道如何。
vue，这个很好用，渲染了被点击的单个帖子

<script setup lang="ts">
import axios from "axios";
import { ref } from "vue";
import { onMounted } from "vue";
import moment from "moment";

const postsUrl = "http://localhost/wordpress/wp-json/wp/v2/posts";
const posts = ref([] as any);

const isLoading = ref(false);
const errorCaught = ref(false);

var queryOptions = {
  _embed: true,
};

const getPosts = () => {
  isLoading.value = true;

  axios
    .get(postsUrl, { params: queryOptions })
    .then((response) => {
      posts.value = response.data;
      console.log(posts.value);
      isLoading.value = false;
    })
    .then(() => {
      console.log(isLoading.value);
    })
    .catch((error) => {
      if (error) {
        isLoading.value = false;
        errorCaught.value = true;
      }
    });
};

onMounted(async () => {
  getPosts();
});
</script>

<template>
  <transition name="fadeLoading">
    <div v-if="isLoading" class="posts-loading">
      <div class="circle"></div>
    </div>
  </transition>
  <transition name="fadeLoading">
    <div class="errorCaught" v-if="errorCaught">
      There was an error loading news
    </div>
  </transition>
  <div class="blog-container">
    <div class="wrapper">
      <transition-group name="fadeBlog">
        <ul v-if="!isLoading" class="blog-posts-ul" v-for="post in posts">
          <div class="posts-card">
            <a
              ><router-link
                :to="/blog/ + post.slug"
                key="post.id"
                class="posts-permalink"
              >
              </router-link
            ></a>
            <img
              v-if="post.featured_media != 0"
              class="posts-featuredimage"
              :src="post._embedded['wp:featuredmedia'][0].source_url"
              :alt="post.title.rendered"
            />
            <img v-else src="@/assets/logos/favicon-big.png" />
            <div class="posts-date">
              <p>
                {{ moment(post.date).fromNow() + " " + "ago" }}
              </p>
            </div>

            <div class="posts-text">
              <h1 class="posts-title">{{ post.title.rendered }}</h1>

              <p v-html="post.excerpt.rendered" class="posts-excerpt"></p>
            </div>
          </div>
        </ul>
      </transition-group>
    </div>
  </div>
</template>

blogPost.vue，呈现之前点击的内容，但不显示侧边栏的点击内容

<script setup lang="ts">
import { ref, watch, onMounted } from "vue";
import { useRoute } from "vue-router";
import axios from "axios";
import moment from "moment";

const route = useRoute();

const postsUrl = "http://localhost/wordpress/wp-json/wp/v2/posts";
const queryOptions = {
  slug: route.params.blogSlug,
  _embed: true,
};
const post = ref([] as any);
const isLoading = ref(false);

const latestPostsAPI = "http://localhost/wordpress/wp-json/wp/v2/posts";
const latestPosts = ref([] as any);

const errorCaughtLatest = ref(false);

var queryOptionsLatest = {
  _embed: true,
  per_page:3,
};

const getLatest = () => {
  axios
    .get(latestPostsAPI, { params: queryOptionsLatest })
    .then((response) => {
      latestPosts.value = response.data;
      console.log(latestPosts.value);
    })
    .catch((error) => {
      if (error) {
        errorCaughtLatest.value = true;
      }
    });
};

const getPost = () => {
  isLoading.value = true;
  axios
    .get(postsUrl, { params: queryOptions })
    .then((response) => {
      post.value = response.data;
      console.log("Pages retrieved!");
    })
    .catch((error) => {
      console.log(error);
    })
    .then(() => {
      isLoading.value = false;
    });
};

getLatest();
getPost();

</script>

<template>
  <div v-if="!isLoading" class="post-wrapper">
    <div class="wrapper">
      <div class="post-title">{{ post[0].title.rendered }}</div>
      <div class="post-date">
        {{ moment(post[0].date).format("MMMM Do YYYY, h:mm, dddd") }}
      </div>
      <!-- THIS INCLUDES HTML TAGS -->
      <div class="post-content" v-html="post[0].content.rendered"></div>
    </div>
  </div>
  <div class="side-container">
    <div class="side-wrapper">
      <ul v-if="!isLoading" class="blog-posts-ul" v-for="latest in latestPosts">
        <div class="posts-card">
          <a
            ><router-link
              :to="/blog/ + latest.slug"
              key="latest.id"
              class="posts-permalink"
            >
            </router-link
          ></a>
          <img
            v-if="latest.featured_media != 0"
            class="posts-featuredimage"
            :src="latest._embedded['wp:featuredmedia'][0].source_url"
            :alt="latest.title.rendered"
          />
          <img v-else src="@/assets/logos/favicon-big.png" />
          <div class="posts-text">
            <div class="posts-title">{{ latest.title.rendered }}</div>
            <div class="posts-date">
              <p>{{ moment(latest.date).fromNow() + " " + "ago" }}</p>
            </div>
            <div class="posts-author">
              {{ latest._embedded.author[0].name }}
            </div>
          </div>
        </div>
      </ul>
    </div>
  </div>
</template>

谢谢你抽出时间

在我最初的帖子中，正如你所看到的，我使用axios来获取我的帖子与paramsqueryOptions：
我用一个***常量***声明我的queryOptions：

const queryOptions = {
  slug: route.params.blogSlug,
  _embed: true,
};

然后，我调用getPost方法，它使用这个常量：

const getPost = () => {
  isLoading.value = true;
  axios
    .get(postsUrl, { params: queryOptions } })
    .then((response) => {
      post.value = response.data;
      console.log("getPost!");
    })
    .catch((error) => {
      console.log(error);
    })
    .then(() => {
      isLoading.value = false;
    });
};

问题就在这里queryOptions是一个***常量***，在onMounted生命周期中定义，甚至在我不能100%确定之前定义，但是***当我单击此BlogPost.vue组件上的任何链接时，它不会被重新定义。***

因此，求解如下：

更改**getPost**方法，使其不使用预定义常量，而只是简单地键入参数，如下所示：

const getPost = () => {
  isLoading.value = true;
  axios
    .get(postsUrl, { params: { slug: route.params.blogSlug, _embed: true } })
    .then((response) => {
      post.value = response.data;
      console.log("getPost!");
    })
    .catch((error) => {
      console.log(error);
    })
    .then(() => {
      isLoading.value = false;
    });
};

如果我这样做的话，每次运行getPost方法时，它都会运行，因为我看到blogSlug变化为

watch(() => route.params.blogSlug, getPost);

**getPost函数将始终调用最新的route.params.blogSlug，在我单击侧边栏链接时*监视器运行getPost之前，***该函数会发生更改。

点击“最新帖子”侧边栏中的链接时，Vue博客更改呈现的帖子

1条答案

相关问题

热门标签

最新问答