Плохая вложенность компонентов или чего то не хватает для правильной работы v-model?

Question

[Сергей Хлопов]

Здравствуйте, опишу структуру, что бы был понятен вопрос.

Есть компонент с формой добавления категорий <form-category>,
в нём компонент <quill-editor> с настройками для текстового редактора,
а в <quill-editor> уже сам текстовый редактор, компонент <quill>.

В компоненте <form-category> компонент <quill-editor> вызывается вот так:

<quill-editor ref="quillEditor" v-model="category.text"></quill-editor>

А в самому <quill-editor> такой вот код для того что бы v-model работала:

<template>
    <quill v-model="content" :options="editorOption" @change="textChange"></quill>
</template>

<script>
    export default {
        model: {
            prop: 'text',
            event: 'quill-change',
        },
        props: {
            text: {},
        },
        data: function() {
            return {
                content: '',
                editorOption: {
                    placeholder: 'Описание категории...',
                    formats: [],
                    modules: {
                        toolbar: [
                            ['bold', 'italic', 'underline', 'strike'],
                            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                            ['link']
                        ]
                    }
                }
            }
        },
        components: {
            'quill': () => import(/* webpackChunkName: "/quill-editor" */ 'vue-quill-editor/src/editor')
        },
        methods: {
            textChange: function() {
                this.$emit('quill-change', this.content);
            },
            clearEditor: function() {
                this.content = '';
            }
        }
    }
</script>

И у меня такая вот проблема: если в <form-category> я изменяю значение category.text, оно изменяется, и ещё изменяется входной параметр в <quill-editor> - text, но до компонента <quill> значение не доходит, а именно до параметра content в компоненте <quill-editor>. Подскажите пожалуйста что тут можно сделать, или может лучше поменять структуру компонентов не делать такую вложенность. Заранее благодарю за ответ.

Answer 1

[Антон Антон]

Нужен проброс события input вверх по цепочке компонентов, см то, чем на самом деле является v-model в документации: https://ru.vuejs.org/v2/guide/components.html#%D0%...

<template>
    <quill :value="content" @input="value => $emit('input', value)"></quill>
</template>

Comments

[Сергей Хлопов]

Благодарю за ответ, ну у меня вроде так и есть, я передаю событие вверх, родительскому компоненту, в методе

textChange: function() {
                this.$emit('quill-change', this.content);
            },

Когда в quill происходит событие change, то есть когда начали в текстовый редактор что-то вводить.

[Антон Антон]

Сергей Хлопов, имя события другое

Answer 2

[Evgeny Kulakov]

Хм, а где у вас связь между параметром text и content? Они не связаны получается.

Comments

[Сергей Хлопов]

Благодарю за ответ, да, в этом у меня и проблема) я не знаю как их связать, я пробовал использовать вычисляемые свойства, такой вот код был: это в компоненте <quill-editor>

props: {
            text: this.textContenSet,
        },

computed: {
          textContenSet: function() {
              return this.text;
          }
        }

Но почему то я не получал желаемого результата

[Evgeny Kulakov]

Сергей Хлопов, не знаю специфики вашего компонента, но попробуйте так:

<template>
    <quill :value="text" :options="editorOption" @change="$emit('input', $event)"></quill>
</template>

export default {
        model: {
            prop: 'text',
            event: 'input',
        },
        props: {
            text: {
              type: String,
              default: ''
            },
        },
        data: function() {
            return {
                editorOption: {
                    placeholder: 'Описание категории...',
                    formats: [],
                    modules: {
                        toolbar: [
                            ['bold', 'italic', 'underline', 'strike'],
                            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                            ['link']
                        ]
                    }
                }
            }
        },
        components: {
            'quill': () => import(/* webpackChunkName: "/quill-editor" */ 'vue-quill-editor/src/editor')
        },
        methods: {
            clearEditor: function() {
                this.$emit('input', '');
            }
        }
    }

[Сергей Хлопов]

Evgeny Kulakov, Благодарю вас за ответ, попробовал и ваш вариант, но не хотелось всё таки терять v-model="content" на компоненте <quill>, в общем сейчас у меня такой код:

<template>
    <quill v-model="content" :options="editorOption" @change="textChange"></quill>
</template>

<script>
    export default {
        model: {
            prop: 'text',
            event: 'quill-change',
        },
        props: {
            text: {},
        },
        watch: {
            text: function() {
                this.content = this.text;
            }
        },
        data: function() {
            return {
                content: '',
                editorOption: {
                    placeholder: 'Описание категории...',
                    formats: [],
                    modules: {
                        toolbar: [
                            ['bold', 'italic', 'underline', 'strike'],
                            [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                            ['link']
                        ]
                    }
                }
            }
        },
        components: {
            'quill': () => import(/* webpackChunkName: "/quill-editor" */ 'vue-quill-editor/src/editor')
        },
        methods: {
            textChange: function() {
                this.$emit('quill-change', this.content);
            },
            clearEditor: function() {
                this.content = '';
            }
        }
    }
</script>

Если textизменяется то я записываю это значение в content, пока что ошибок не вижу с этим вариантом, опыта в общем в vue у меня пока мало. Правда теперь я думаю о насколько это производительно

[Evgeny Kulakov]

Сергей Хлопов, можно и так, просто судя по представленному компоненту content никак не используется, поэтому смысла его держать внутри компонента нет. Но возможно, это только часть компонента и может в этом будет какой-то смысл.

[Сергей Хлопов]

content у меня для того что бы в нём находился текущий введенный текст, и потом я вот при каждом изменении в этом текстовом редакторе, то есть по событию change в quill, отправляю этот content. И уже в компоненте form-category т.к. есть такой вот вызов:

<quill-editor v-model="category.text"></quill-editor>

В общем короче говоря) conent попадает в category.text по событию change в текстовом редакторе.

Благодарю вас за помощь)