v-html 中的 Vue.js v-model答案

【问题标题】：Vue.js v-model inside v-htmlv-html 中的 Vue.js v-model
【发布时间】：2019-05-07 15:31:05
【问题描述】：

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

在这个例子中，前两个输入通常会与数据链接并相互链接，但第三个（跨度内的那个）不会

【问题讨论】：

你需要一个动态组件而不是v-html。见this answer
Dynamically replaced text string with Vue component的可能重复

标签： javascript html vue.js vuejs2 vue-component

【解决方案1】：

根据the official doc：

span 的内容将替换为rawHtml 属性的值，解释为纯 HTML - 数据绑定被忽略。请注意，您不能使用 v-html 来编写模板部分，因为 Vue 不是基于字符串的模板引擎。相反，组件更适合作为 UI 重用和组合的基本单元

欲了解更多详情，请尝试查看@RoyJ 的answer

【讨论】：