How to toggle class to body tag in Vuejs?

How I can toggle class for body tag, I have tried couple of ways to resolve my problem, but still recieve error message and have no ideas for it. So, this is my story:

  1. On body tag, I added v-bind:class
<body id="app" v-bind:class='{active:showModal}'>

And then I recieved these errors:

[Vue warn]: v-bind:class="{active:showModal}": attribute interpolation is not allowed in Vue.js directives and special attributes.
[Vue warn]: Invalid expression. Generated function body:  scope.active:scope.showModal
[Vue warn]: Error when evaluating expression "active:showModal". Turn on debug mode to see stack trace.
  1. Then I tried to resolve my problem with these changes on body tag:
<body id="app" @v-bind:class='active:showModal'>

But I still have one error:

[Vue warn]: Invalid expression. Generated function body:  scope.active:scope.showModal

How I can resolve that one?

Answers


Vue is trying to evaluate the value of active because it isn't quoted. Just add quotes:

<body id="app" :class='{"active":showModal}'>

Need Your Help

How to trigger event in JavaScript?

javascript events javascript-events triggers addeventlistener

I have attached an event to a text box using addEventListener. It works fine. My problem arose when I wanted to trigger the event programmatically from another function.

To assign path cost to polygons in a buffer

netlogo

I would like to build least-cost paths between the polygon (e.g. polygon A) where there is a wolf and all polygons that are situated in a radius of 3 km around the wolf and to found the polygon tha...