v-html 中的 Vue.js v-model

Posted 2023-02-23

【中文标题】v-html 中的 Vue.js v-model

【英文标题】：Vue.js v-model inside v-html

【发布时间】：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的可能重复

【参考方案1】：

根据the official doc：

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

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