V-модель Vue.js внутри V-HTML

Question

Я хочу хранить html внутри переменной.Пример:

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

И я хочу получить в данных значение, которое пользователь вводит в поле.Но это соединение не работает Полный пример:

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>'
});

В этом примере первые два входа обычно связываются с данными и друг с другом, но третий (один внутри промежутка) не будет

Answer 1

Согласно официальному документу :

Содержимое диапазона будет заменено значением свойства rawHtml, интерпретируемым как обычный HTML - привязки данныхигнорируются.Обратите внимание, что вы не можете использовать v-html для составления частичных шаблонов, потому что Vue не является движком шаблонов на основе строк.Вместо этого, компоненты предпочтительны в качестве основной единицы для повторного использования пользовательского интерфейса и композиции

. Для получения более подробной информации попробуйте проверить @ RoyJ's answer