v-html 中的 Vue.js v-model

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

Answer 1

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