v-html 내부 Vue.js v-model

v-html 내부 Vue.js v-model

html intervariable을 저장하고 싶다.예:

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

이 예에서 처음 두 입력은 일반적으로 데이터와 서로 연결되지만 세 번째 입력(내부 입력)은 연결되지 않는다.

공식 문서에 따르면:

스팬의 내용은 다음 값으로 대체된다.rawHtml일반 HTML로 해석되는 속성 - 데이터 바인딩은 무시된다.Vue는 문자열 기반 템플리트 엔진이 아니기 때문에 v-html을 사용하여 템플릿 부분을 구성할 수 없다는 점에 유의하십시오.대신 UI 재사용과 구성의 기본 단위로 컴포넌트를 선호한다.

자세한 내용은 @RoyJ의 답변을 확인하십시오.

참조URL: https://stackoverflow.com/questions/53642874/vue-js-v-model-inside-v-html