CODEWITHSUNDEEP
vuejs2vue-component
abu abu
abu abu

Reputation: 7028

Clear mounted html in vue.js

I have 2 components. I have some checkboxes in first component.It resides in left side of the Web Page like Nav bar. In second component I would like to load some HTML Div element on the basis of those checkbox. Now I can load the divs while clicking on those checkboxes using below code.

mounted () {
        EventBus.$on('change',this.formated);
    },

But when I am clicking on a new checkboxes the loaded divs of previous checkboxes will not disappear. I can see both output of current and previous checkboxes as like output of .append() of jQuery.

How can I clear/disappear previous HTML outputs ?

Upvotes: 0

Views: 883

Answers (1)

user320487
user320487

Reputation:

You need use jQuery's clear() on the elements innerHTML which you're appending too. A better approach would be to instead of appending content, use a v-for directive and maintain an array in the data property with the content you want visible. That would be leveraging vue's reactivity for its intended purposes and offer a more flexible implementation.

Upvotes: 1

Related Questions