javascript - Vue.js v-model inside v-html - Stack Overflow

admin管理员组

文章数量:1402321

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

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

• javascript
• html
• vue.js
• vuejs2
• vue-ponent

Share Improve this question Follow edited Aug 21, 2019 at 17:03 Boussadjra Brahim 1 asked Dec 6, 2018 at 0:31 JarofjamJarofjam 4311 silver badge33 bronze badges 2

• 2 You'll need a dynamic ponent instead of v-html. See this answer – Roy J Commented Dec 6, 2018 at 0:45
• Possible duplicate of Dynamically replaced text string with Vue ponent – Daniel Beck Commented Feb 2, 2019 at 15:57

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

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 pose template partials, because Vue is not a string-based templating engine. Instead, ponents are preferred as the fundamental unit for UI reuse and position

for more details try to check @RoyJ's answer

本文标签： javascriptVuejs vmodel inside vhtmlStack Overflow