Vue.js v-model inside v-html

Question

I want to store html inside variable. Example:

data: function() {
  return {
    my_html: '<input type="text" v-model="data"'
  }
}

And I want to receive in data the value that user enters in the field. But this connection does not work Full example:

var test = new Vue({
  el: '#some_id',
  data: function() {
    return {
      data: '',
      my_html: '<input type="text" v-model="data" />'
    }
  },
  template: 
    '<div>
      <input type="text" v-model="data" />
      <input type="text" v-model="data" />
      <span v-html="my_html"></span>
    </div>'
});

In this example, the first two inputs will normally link with data and with each other, but the third (the one inside span) won’t

You'll need a dynamic component instead of `v-html`. See [this answer](https://stackoverflow.com/a/53545138/392102) — Roy J, Dec 06 '18 at 00:45
Possible duplicate of [Dynamically replaced text string with Vue component](https://stackoverflow.com/questions/53542295/dynamically-replaced-text-string-with-vue-component) — Daniel Beck, Feb 02 '19 at 15:57

score 5 · Accepted Answer · edited Jul 15 '22 at 21:00

According to the official doc :

The contents of the span will be replaced with the value of the rawHtml property, interpreted as plain HTML - data bindings are ignored. Note that you cannot use v-html to compose template partials, because Vue is not a string-based templating engine. Instead, components are preferred as the fundamental unit for UI reuse and composition

for more details try to check @RoyJ's answer

Vue.js v-model inside v-html

1 Answers1

Linked