关键词:
【中文标题】我想为 vue.js (nuxt.js) 中的每个组件加载和填充数据【英文标题】:I want to load and populate the data for each component in vue.js (nuxt.js) 【发布时间】:2017-11-28 07:56:44 【问题描述】:我按如下方式启动项目。
vue init nuxt/express
我的目录是...
components
|- slider.vue
|- list.vue
pages
|- index.vue
组件是,
index.vue
<template>
<my-slider/>
<my-list/>
</template>
<script>
import MySlider from '~components/slider'
import MyList from '~components/list'
export default
components:
MySlider,
MyList
,
asyncData ()
... axios get ...
return
img: response.data.img
</script>
我设置了以下结构。
如果发生 GET / 请求,
我想在每个组件(MySlider、MyList)中从数据库中导入数据。
-
是否每个组件(MySlider、MyList)都需要从asyncData()发出axios请求?我应该从索引组件 asyncData() 发出 axios 请求吗?
请求后如何设置数据初始化axios响应数据?
【问题讨论】:
【参考方案1】:您决定如何设置数据。 如果您在两个子组件中使用相同的数据,我会从父组件中获取它们,并使用属性将其发送到 MySlider 和 MyList 组件。
如果两个组件中的数据彼此无关,我可能会尝试让这些组件尽可能松散耦合,并让它们在需要时获取数据。
查看 VueJS 的生命周期挂钩,了解如何挂钩组件上发生的任何生命周期事件;这些钩子允许您在需要时立即获取数据(阅读:一旦您的组件被创建/安装/任何您想要的):https://vuejs.org/v2/api/#Options-Lifecycle-Hooks
【讨论】:
当 nuxt.js (vue.js) 中的路由更改时,Facebook 分享按钮消失
】当nuxt.js(vue.js)中的路由更改时,Facebook分享按钮消失【英文标题】:Facebooksharebuttondisappearwhenroutechangedinnuxt.js(vue.js)【发布时间】:2021-11-1913:01:57【问题描述】:在我的nuxt.js("nuxt":"^2.15.7")网络应用程序中,我正在使用fullcodeexampl... 查看详情
Vue.js 和 Nuxt.js
...注册全局组件。如何在客户端行为的某些用户上切换nuxt中的布局。在哪里编写vue.use(somep 查看详情
如何在 Vue.js/Nuxt.js 中为 RepositoryFactory 编写测试
...2106:03:34【问题描述】:夏天我已经为Vue.js/Nuxt.js应用程序中的API连接实现了RepositoryFactory模式。https://medium.com/canariasjs/vue-ap 查看详情
如何在 nuxt.js 中挑选 bootstrap-vue.js 模块?
...无法理解如何在nuxt.js中挑选bootstrap-vue.js模块nuxt.config.js中的以下代码正在拉取整个库(不包括css),但如上所述如何包含所需的模块。modules:[[\' 查看详情
(Nuxt.js/Vue.js) - 脚本只运行一次,更改路由/刷新页面后停止运行
...移”到Vue.js,顶部是Nuxt.js。我正在将存储在远程服务器中的所有文件的内容复制 查看详情
如何在 nuxt.js (vue.js) 中配置动态 og 标签?
】如何在nuxt.js(vue.js)中配置动态og标签?【英文标题】:HowdoIconfiguredynamicogtagsinnuxt.js(vue.js)?【发布时间】:2018-05-3112:59:18【问题描述】:我使用vueinitnuxt/expressmyprojectstart启动了nuxt应用程序。这是我的目录。page|-_project.vue|-project|-... 查看详情
如何在 Nuxt.js (Vue.js) 中使用 vue-infinite-loading
】如何在Nuxt.js(Vue.js)中使用vue-infinite-loading【英文标题】:Howtousevue-infinite-loadinginNuxt.js(Vue.js)【发布时间】:2017-10-2807:01:42【问题描述】:我在Nuxt.js(Vue.js)中开发网络应用程序首先,vueinitnuxt/expressMyProject~page/help.vue<template><... 查看详情
nuxt的介绍以及入门(代码片段)
1.Nuxt.js服务器端渲染学习目标了解Nuxt.js的作用掌握Nuxt.js中的路由掌握layouts、pages以及components的区别能够在Nuxt.js项目中使用element-ui掌握Nuxt.js中异步获取数据的方式完成豆瓣电影小案例掌握SEO的优化1.1Nuxt.js入门1.1.1什么是Nuxt.jsVu... 查看详情
Nuxt.js:无法生成路由
...tgenerateroutes【发布时间】:2021-03-1215:06:51【问题描述】:我想为我的项目生成静态路由(/contact、/about、...)和动态路由(/project/1、/project/2,...),这样当用户刷新页面时访问这些路线中的任何一条,页面仍然有效。但是在执行n... 查看详情
Vue.js (Nuxt) 返回 JSON 数据
】Vue.js(Nuxt)返回JSON数据【英文标题】:Vue.js(Nuxt)ReturnJSONData【发布时间】:2021-10-1709:40:34【问题描述】:我尝试使用Nuxt.js制作JSONAPI。但是我请求了一个URL并且返回了html代码(网站的源代码。如:view-source:https://website.com)。我... 查看详情
Nuxt js (vue js) 禁用默认头链接
】Nuxtjs(vuejs)禁用默认头链接【英文标题】:Nuxtjs(vuejs)Disableddefaultheadlinks【发布时间】:2022-01-2306:32:26【问题描述】:我正在创建一个系统,我正在为我的应用程序的前端使用vue-nuxt框架。到目前为止,这是一个很棒的js框架,但... 查看详情
基于vue.js的ssr技术—nuxt.js
为什么要使用Nuxt.jsNuxt基于一个强大的模块化架构。你可以从50多个模块中进行选择,让你的开发变得更快、更简单。对PWA的支持、添加谷歌分析到你的网页或生成网站地图,这些功能都无需重新发明轮子来获得。Nuxt.js默认会优... 查看详情
Vue.js - 如何在数组对象上实现计算属性?
...4-2303:09:10【问题描述】:我的Vue实例中有一个对象数组,我想为每个项目编写一个Computed属性。每个对象只有两个属性:firstName和lastName。我想为每个名为\'fullName\'的Computed属性写一个, 查看详情
使用 nuxt-mail 在 Nuxt.js 中发送邮件
...新手,所以这里有一些新手问题:D我在从Nuxt.js应用程序中的联系人发送邮件时遇到问题。我正在尝试使用nuxt-mailer,但无法使其正常工作。我已经安装了axios和nuxt-mail。我得到500(内部服 查看详情
使用 nuxt.js 和 vue.js 在 <template> 标记内加载脚本
】使用nuxt.js和vue.js在<template>标记内加载脚本【英文标题】:Loadscriptinsidethe<template>tagusingnuxt.jsandvue.js【发布时间】:2018-05-0717:29:21【问题描述】:我正在使用nuxt.js(基于vue.js)构建自定义网站,我需要使用合作伙伴提... 查看详情
我想为列表中的每个元素提取索引[重复]
】我想为列表中的每个元素提取索引[重复]【英文标题】:Iwouldliketoextractindexesforeachelementinalist[duplicate]【发布时间】:2020-11-2008:41:42【问题描述】:我有两个列表:list1=["A","B","C","D","E"]list2=["A","A","C","B","E","A","C","B","E","D"]我想为... 查看详情
如何在 nuxt.js 中编写全局路由器功能
】如何在nuxt.js中编写全局路由器功能【英文标题】:howtowriteglobalrouter-functioninnuxt.js【发布时间】:2018-01-1213:11:55【问题描述】:我正在将Vue.js与Nuxt.js一起使用,但路由器的功能出现问题。在纯Vue中,我可以这样写main.js:valroute... 查看详情
nuxt.js知识点(代码片段)
...务端渲染成适合搜索引擎抓取的页面,再下载到客户端。Nuxt.js是Vue.js的通用框架,最常用的就是用来作SSR(服务器端渲染)。再直白点说,就是Vue.js原来是开发SPA(单页应用)的,但是随着技术的普及, 查看详情