从 nuxt.js 应用程序中的组件操纵 body 和 html 背景

Question

我通过 http get 从组件内的 api 加载数据。此数据包括动态颜色十六进制代码。

我需要修改html,bodybackground-color属性为这个十六进制代码

我已经搜索修改 header css，但找不到解决方案。

return app.$axios.post('http://localhost/ea/api/collections/get/Projekte',
{filter: { Slug: 'getdata'}})

.then(res => {return {siteData: res.data.entries[0]}})

siteData ... includes hex eg. siteData.background: '#ffff'

Answer 1

您可以简单地使用纯 Javascript 代码来操纵您的 DOM:

document.querySelector('body').style.backgroundColor=siteData.background
//document.querySelector('body').style.backgroundColor='#ff5'

您也可以创建一个 computed 属性来做到这一点

从 nuxt.js 应用程序中的组件操纵 body 和 html 背景

Manipulate body and html background from a component in a nuxt.js application

javascript

vue.js

nuxt.js