[Vuejs]-Vuejs problem ; How to bind new elements added to DOM?

0👍

Have you tried something like this?

<div v-html="newElem"></div>


el: "#app",
data: {
"a": "aa",
"b": "bb"
},
created() {
this.newElem = "<span>{{ b }}</span>";
}

0👍

It’s really hard to tell your ultimate goal here but I’ll take a shot.

Ideally, you wouldn’t touch the DOM, you’d want to update the data and let Vue handle the DOM for you.

I think you want to initialize b as undefined and set that when you’re ready for it to be displayed.

data: {
  a: 'aa',
  b: undefined,
}

Then in your template you can have something like this:

<span v-if="b">{{ b }}</span>

This way the span won’t display until b is truthy.

Then, later, when b is ready, you would mainApp.b = 'bb'.

Here’s a quick demo: http://jsfiddle.net/crswll/vtu8nzea/1/

If you make add a more complete use case I can likely help further.

Also, this answer might help as well. It’s kind of like the next level of this thinking: Vuejs: v-model array in multiple input

Leave a comment