VueJs: 텍스트 영역 입력 바인딩

VueJs: 텍스트 영역 입력 바인딩

컴포넌트 내에서 텍스트 영역의 값 변화를 검출하는 방법을 찾고 있습니다.

입력은 간단하게 사용할 수 있습니다.

<input
  :value="value"
  @input="update($event.target.value)"
>

그러나 텍스트 영역에서는 이 기능이 작동하지 않습니다.

현재 사용하고 있는 것은 CKEditor 컴포넌트입니다.CKEditor 컴포넌트는 부모 컴포넌트(이 자 컴포넌트에 부속)의 모델 값이 갱신되면 wysiwyg의 컨텐츠가 갱신됩니다.

나의Editor현재 컴포넌트는 다음과 같습니다.

<template>
    <div class="editor" :class="groupCss">
        <textarea :id="id" v-model="input"></textarea>
    </div>
</template>

<script>
    export default {
        props: {
            value: {
                type: String,
                default: ''
            },
            id: {
                type: String,
                required: false,
                default: 'editor'
            }
        },
        data() {
            return {
                input: this.$slots.default ? this.$slots.default[0].text : '',
                config: {
                    ...
                }
            }
        },
        watch: {
            input(value) {
                this.update(value);
            }
        },
        methods: {
            update(value) {
                CKEDITOR.instances[this.id].setData(value);
            },
            fire(value) {
                this.$emit('input', value);
            }
        },
        mounted () {
            CKEDITOR.replace(this.id, this.config);
            CKEDITOR.instances[this.id].setData(this.input);
            this.fire(this.input);
            CKEDITOR.instances[this.id].on('change', () => {
                this.fire(CKEDITOR.instances[this.id].getData());
            });
        },
        destroyed () {
            if (CKEDITOR.instances[this.id]) {
                CKEDITOR.instances[this.id].destroy()
            }
        }
    }
</script>

부모 컴포넌트에 포함시킵니다.

<html-editor
    v-model="fields.body"
    id="body"
></html-editor>

그러나 상위 구성요소의 모델 값이 변경될 때마다(감시자를 트리거하지 않음), 사실상 편집기의 창을 업데이트하지 않습니다.

필요한 건update()상위 구성 요소의 모델이 호출되는 메서드fields.body갱신되었습니다.

어떻게 접근하면 좋을까요?

해독하는 것은 꽤 어려운 코드이지만 텍스트 영역과 WYSIWYG HTML 창을 2개의 다른 컴포넌트로 분할하여 부모가 값을 동기화하도록 합니다.

TextArea 컴포넌트:

<template id="editor">
  <textarea :value="value" @input="$emit('input', $event.target.value)" rows="10" cols="50"></textarea>
</template>

/**
 *  Editor TextArea
 */
Vue.component('editor', {
  template: '#editor',
  props: {
    value: {
      default: '',
      type: String
    }
  }
});

 

여기서 하고 있는 것은 입력이 변경되었을 때 부모에게 다시 송신하는 것 뿐입니다.이벤트명으로 입력을 사용하고 있습니다.value내가 사용할 수 있도록 소품으로서v-model편집자에게.이제 코드를 보여줄 wysiwyg 창이 필요합니다.

WYSIWYG 창:

/**
 * WYSIWYG window
 */
Vue.component('wysiwyg', {
  template: `<div v-html="html"></div>`,
  props: {
    html: {
      default: '',
      type: String
    }
  }
}); 

별다른 일은 없지만 HTML을 소품으로 전달할 뿐입니다.

마지막으로 컴포넌트 간의 값을 동기화하기만 하면 됩니다.

<div id="app">
  <wysiwyg :html="value"></wysiwyg>
  <editor v-model="value"></editor>
</div>

new Vue({
  el: '#app',
  data: {
    value: '<b>Hello World</b>'
  }
})

이제 에디터가 변경되면 이벤트가 부모에게 다시 전송되고, 부모에게 이벤트가 전송되어 갱신됩니다.value위시위그 창에 불이 붙는 거죠다음은 모든 활동 내용입니다.https://jsfiddle.net/Lnpmbpcr/

언급URL : https://stackoverflow.com/questions/44995186/vuejs-textarea-input-binding