当我单击 nuxt js 按钮时，会出现响应答案

【问题标题】：When I click the nuxt js button the response appears当我单击 nuxt js 按钮时，会出现响应
【发布时间】：2021-02-10 16:26:57
【问题描述】：

我想隐藏一个 nuxt js 项目的响应并使用 SSR 发布请求。

这在页面首次加载时是可能的。

    <template>
  <p v-if="$fetchState.pending">Fetching mountains...</p>
  <p v-else-if="$fetchState.error">An error occurred :(</p>
  <div v-else>
    <h1>Nuxt Mountains</h1>
    <ul>
      <li v-for="mountain of mountains">{{ mountain.title }}</li>
    </ul>
    <b-btn @click="$fetch">Refresh</b-btn>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        mountains: []
      }
    },
    async fetch() {
      this.mountains = await fetch(
        'https://api.nuxtjs.dev/mountains'
      ).then(res => res.json())
    }
  }
</script>

但是，当点击按钮时，apiler 出现在浏览器网络响应中。

when the page loads

Clicking the button

【问题讨论】：

你为什么不直接使用asyncData？

标签： vue.js nuxt.js server-side-rendering nuxtjs

【解决方案1】：

请求在页面加载时没有出现在网络选项卡中的原因是因为 nuxt 在服务器上运行 fetch 方法，并在加载之前将响应注入页面组件。您希望同一页面上的按钮再次获取数据，但不希望数据请求出现在网络选项卡中？

如果是这样，我认为您将不得不刷新页面。这样，在页面加载之前 fetch 方法会再次运行，并且您的用户不会看到请求，就像在传统的 SSR 应用程序中一样。然而，对于 Nuxt 应用来说，这似乎是一个不寻常的用例！

代替：

<b-btn @click="$fetch">Refresh</b-btn>

用途：

<b-btn @click="this.$router.go()”>Refresh</b-btn>

【讨论】：