VueJs: Textarea entrée de liaison

Je suis à essayer de comprendre comment détecter le changement de la valeur sur le textarea de l'intérieur du composant.

Pour l'entrée nous pouvons simplement utiliser

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

Cependant sur textarea cela ne fonctionne pas.

Ce que je suis en train de travailler, c'est de l'CKEditor composant, qui devrait mettre à jour wysiwyg contenu où le modèle de la valeur du composant parent (joint à ce composant enfant) est mis à jour.

Mon Editor composant actuellement ressemble à ceci:

<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>

et je l'inclus dans le composant parent

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

cependant, chaque fois que composant parent du modèle de changement de la valeur - il ne déclenche pas le spectateur de manière à ne pas la mise à jour de l'éditeur de fenêtre.

J'ai seulement besoin de update() méthode appelée lorsque le parent du composant de modèle fields.body est mis à jour.

Un pointeur comment pourrais-je l'aborder?

OriginalL'auteur Sebastian Sulinski | 2017-07-09

  1. 2

    C'est un peu juste de code à déchiffrer, mais ce que je voudrais faire est de briser la zone de texte et le WYSIWYG HTML fenêtre en deux composantes distinctes et alors le parent synchroniser les valeurs, alors:

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

     

    Tout ce que je fais ici est émettant de l'entrée à la maison mère en cas de changement, je suis l'aide de l'entrée que le nom de l'événement et value que l'hélice si je peux utiliser le v-model sur l'éditeur. Maintenant, j'ai juste besoin d'un wysiwyg fenêtre pour afficher le code:

    WYSIWYG Fenêtre:

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

    Rien qui se passe là-bas, elle rend tout simplement le code HTML qui est passé comme un accessoire.

    Enfin j'ai juste besoin de synchroniser les valeurs entre les composants:

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

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

    Maintenant, lorsque l'éditeur de changements, il émet l'événement à la maison mère, qui met à jour value et à son tour, déclenche un changement dans le wysiwyg fenêtre. Voici l'intégralité de la chose en action: https://jsfiddle.net/Lnpmbpcr/

    Merci @craig_h - je vais faire un essai
    Hmm, je ne pense pas que ça va fonctionner comme wysiwyg doit également émettre input lorsque son contenu est mis à jour - à ce moment, ce serait uniquement la mise à jour wysiwyg lorsque vous tapez dans editor, qui je le crains n'est pas ce que je suis après. Merci quand même.
    Ah OK, dans ce cas, je vous suggère de regarder vuex de sorte que vous pouvez extraire de l'état partagé, plutôt que d'essayer d'émettre et de synchronisation de l'état à travers des composants vous-même.
    J'ai fini à l'aide de Gestionnaire d'Événements - lorsque le parent changements de modèle, je le feu de l'événement - qui est piégé à partir de l'intérieur de l'éditeur de - puis la mise à jour est effectuée.

    OriginalL'auteur craig_h