Adding v-bind to dynamically added element

Adding v-bind to dynamically added element

I am using vue.js (without webpack) but I have a situation where I need to dynamically create a new dom element (like through a button click) but I would like to v-bind the class attribute of the new element. I tried just adding v-bind:class as an attribute but that won't work since vue is unaware of it after vue has loaded the virtual dom. I don't see anyway to non-declaratively add a class binding in code for the element. I tried to force vue to refresh the virtual dom but that didn't really work either. Any ideas?

Show your code, it sounds like your not understanding how vue works.. use arrays of objects, with a state prop which sets the class.. you dont make the dom yourself.
– Lawrence Cherone
Jul 1 at 16:22

You shouldnt create objects outside of vue. You can create objects inside vue.
– Aldarund
Jul 1 at 16:29

I am quite aware of what vue is supposed to do and not do. I was just asking if there was a way to do this. I know it's kind of hacky but it would make it much easier if it were possible. Simple code in the mounted section, using jquery to make it simple is $("#button").on("click", function(){ $("body").append("<div v-bind:class='{active:isActive}'></div>");
– Craig
Jul 1 at 18:27

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

VKMBwn9,y,mVIyJD4nebJ xuAEUL

搜尋此網誌

Gtjkyu