- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我刚开始学习 nuxtjs(对 vue.js 有一些经验),我遇到了以下问题:
我有一个简单的 todo-[id].vue
页面。它应该从 API 获取待办事项并呈现在页面上:
<script setup>
import Section from '~~/components/UI/containers/section.vue';
import ButtonLink from '~~/components/UI/buttons/button-link.vue';
const route = useRoute()
const todoId = parseInt(route.params.id)
const { data: todo } = await useFetch(`https://jsonplaceholder.typicode.com/todos/${todoId}`)
</script>
<template>
<Section>
<div class="mt-4 flex space-x-4">
<ButtonLink :to="{name: 'todo-id', params: {id: todoId - 1}}" type="secondary" v-show="todoId !== 1">previous</ButtonLink>
<ButtonLink :to="{name: 'todo-id', params: {id: todoId + 1}}">next</ButtonLink>
</div>
<div class="mt-6">
<p class="text-lg" :class="[todo.completed ? 'text-green-600' : 'text-red-600']">{{ todo.title }} (#{{ todo.id }})</p>
</div>
</Section>
</template>
它在服务器端工作正常,但是当我点击 next
按钮时,它不会调用 API 来获取下一个项目,页面的 url 正在改变。我应该怎么做才能在客户端调用API?我记得它在 vue.js 中运行良好
最佳答案
useFetch
尝试为您缓存文档并在您加载下一页时重新使用缓存。为避免这种行为,您可以传递函数而不是字符串:
useFetch(() => `https://jsonplaceholder.typicode.com/todos/${todoId}`)
或提供您自己的 key :
useFetch(`https://jsonplaceholder.typicode.com/todos/${todoId}`, { key: `todo:${todoId}` })
关于nuxt.js - 为什么 useFetch 不能处理客户端 nuxt3 中的页面更改?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/73358147/
React 的半新内容。我有一个 useFetch Hook ,它具有所有的获取功能,我想在用户单击“加载更多项目”按钮时调用它来获取下一页的项目。 显然, { useFetch(...) }}>l
我有一个 api,它为我提供了如下方法: 按用户名搜索用户(用户名,限制) getRandomPremiumUsers(限制) getYoungUsers(maxAge, 限制) 我正在实现一个钩子(
我是 nuxt3 的新手,我不了解 useFetch 中 key 选项的作用(使用)可组合 它说; /* key: a unique key to ensure that data fetching
我有很多 React 经验,但我是 Hooks 的新手。 我有以下 useFetch Hook ,我在此 useAsync 之后修改了它钩子(Hook): import { useState, use
我已经实现了一个自定义 useFetch Hook ,因此可以在我的应用程序中进行提取: import { useEffect, useState } from 'react' const useFe
我只是不知道如何处理这里的错误: const { error, data } = useFetch('https://example.app/api/contact', { method: "P
我只是不知道如何处理这里的错误: const { error, data } = useFetch('https://example.app/api/contact', { method: "P
当我在NUXT环境中运行此代码时:。它提供了以下结果:。当我将SSR:FALSE添加到nuxt-config文件时,它已经被解析了。我对此感到困惑。
我刚开始学习 nuxtjs(对 vue.js 有一些经验),我遇到了以下问题: 我有一个简单的 todo-[id].vue 页面。它应该从 API 获取待办事项并呈现在页面上: import Sec
我刚开始学习 nuxtjs(对 vue.js 有一些经验),我遇到了以下问题: 我有一个简单的 todo-[id].vue 页面。它应该从 API 获取待办事项并呈现在页面上: import Sec
我构建了一个 useFetch 函数,该函数与此密切相关:https://www.robinwieruch.de/react-hooks-fetch-data这是它的简化版本:How to corre
我已经从 nuxt 3 官方文档中设置了 nuxt 3,并使用唯一的 useFetch() 可组合项来获取 app.vue 文件中的数据,但它返回错误 Error: fetch failed()当我们
编辑:我使用的是Nuxt 3.7.1版。我有一个Nuxt网站。我有一个服务器端点来获取内容。当页面第一次加载时,会显示当前数据。如果我刷新页面,则不会调用useFetch(基于网络日志),并显示旧数据
我是一名优秀的程序员,十分优秀!