V-HTML中的Vue.js V模型 [英] Vue.js v-model inside v-html

问题描述

我想将html存储在变量内.示例:

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

推荐答案

根据官方文档:

span的内容将替换为rawHtml属性的值，该值解释为纯HTML-数据绑定将被忽略.请注意，由于Vue不是基于字符串的模板引擎，因此无法使用v-html来组成模板部分.相反，组件是首选的UI重用和合成的基本单元

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

有关更多详细信息，请尝试检查@RoyJ的答案

for more details try to check @RoyJ's answer

这篇关于V-HTML中的Vue.js V模型的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！