Javascript 使用vue动态更改主体背景

我正在创建一个表单，希望用户为其表单选择背景色。此颜色选择将更改主体标记的背景色。我给他们颜色的选择，无论他们选择哪种颜色，都会自动改变背景色

我正在与laravel和Vue一起做这个项目。我想知道动态地做这件事的最佳方式是什么，因为现在我运气不太好

我发现了一些方法来做到这一点。第一种方法是创建beforeCreate钩子来更改主体的背景颜色，如下所示：

beforeCreate() {
        this.color = 'bc-header-red';
        document.body.className = this.color;
    },

但是，这不允许我像我希望的那样更新背景颜色，即使使用更新挂钩也不行

第二个选项是执行与我发现的这个类似的实现。基本上，我可以将body标记的样式v绑定到某个值。但是，问题在于，by body标记位于我的laravel刀片文件中，而不是vue js文件中。我可以移动它吗

我还可以做哪些其他可能的实现或事情？谢谢

您可以使用vue$emit：

在Vue组件中，您应该有一个处理颜色选择的方法，如下所示：

手感颜色{ this.color=this.colorSelected； document.body.className=this.color； } 只需将其更改为发射所选颜色：

手感颜色{ this.color=this.colorSelected； document.body.className=this.color； this.$root.$emit'body-background-color'，this.colorSelected； } 现在，您有了，并且可以在您的主要组件上：

在主要组件内，在安装方法内：

---

希望能有所帮助。

使用vue的具体原因？熟悉度以及项目中的其他需求是否需要它？您是否正在开发组件？是的，我正在开发“CreateGame”组件。但是，我希望能够更改整个页面的body标记，而不仅仅是组件的背景。在watcher中设置body类。随意改变这个颜色。

mounted() {
    this.$root.$on('body-background-color', function(color) {
        //handle the background color change here  
    });
}