Vue 모델이 업데이트되지 않음

Vue 모델이 업데이트되지 않음

사용자 정의 텍스트 영역 구성 요소의 모델 데이터를 업데이트하려고 할 때this.message='<span id="foo">bar</span>텍스트와 html이 htmltextarea 태그에 정상적으로 표시되지 않지만 Vue dev 툴의 콘솔에서 업데이트가 적용되어 있음을 알 수 있습니다.문자열 대신 개체로 전환하고 Vue.set을 사용해 보았지만 이 역시 작동하지 않습니다.

이 문제를 해결할 방법이 없을까요?

목표:htmlTextAreacomponent는 htmlTextArea 태그에서 사용자의 텍스트를 가져와(이는 기능합니다), 이 텍스트를 조작하여 텍스트 영역에 다시 바인드하는 것입니다.단, HTML이 포함되어 있습니다.

사용자 지정 텍스트 영역 구성 요소:

<template>
  <div contenteditable="true" @input="updateHTML" class="textareaRoot"></div>
</template>
<script>
export default {
  // Custom textarea 
  name: 'htmlTextArea',
  props:['value'],
  mounted: function () {
      this.$el.innerHTML = this.value;
  },
  methods: {
      updateHTML: function(e) {
          this.$emit('input', e.target.innerHTML);
      }
  }
}
</script>

기타 컴포넌트:

<template>
...
<htmlTextArea id="textarea" v-model="message"></htmlTextArea>
...
</template>
<script>
      data: {
        return {
          message: 'something'//this works
        }
      }
     ...
     methods: {
      changeText() {
        this.message='<span id="foo">bar</span>'//this does not
      }
     },
     components: {
         htmlTextArea
     }
</script>

값을 명시적으로 설정할 필요가 있습니다.value소품 교체지켜볼 수 있다value바꾸다.

<template>
    <div contenteditable="true" @input="updateHTML" class="textareaRoot"></div>
</template>
<script>

export default {
  // Custom textarea
  name: "htmlTextArea",
  props: ["value"],
  mounted: function() {
    this.$el.innerHTML = this.value;
  },
  watch: {
      value(v) {
          this.$el.innerHTML = v;
      }
  },
  methods: {
    updateHTML: function(e) {
      this.$emit("input", e.target.innerHTML);
    }
  }
};
</script>

를 변경하다data정의된 대로 반응하지 않습니다.

data () {
    return {
        message: 'something'//this works 
    }
}

이제 업데이트 할 때,message컴포넌트가 그에 따라 갱신됩니다.

깊이에서의 반응성

언급URL : https://stackoverflow.com/questions/49809545/vue-model-not-updating