Shlop
@Shlop
Программист

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

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

Есть компонент с формой добавления категорий <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>. Подскажите пожалуйста что тут можно сделать, или может лучше поменять структуру компонентов не делать такую вложенность. Заранее благодарю за ответ.
  • Вопрос задан
  • 130 просмотров
Пригласить эксперта
Ответы на вопрос 2
Fragster
@Fragster
помогло? отметь решением!
Нужен проброс события input вверх по цепочке компонентов, см то, чем на самом деле является v-model в документации: https://ru.vuejs.org/v2/guide/components.html#%D0%...
<template>
    <quill :value="content" @input="value => $emit('input', value)"></quill>
</template>
Ответ написан
kulakoff
@kulakoff Куратор тега Vue.js
Vue.js developing
Хм, а где у вас связь между параметром text и content? Они не связаны получается.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы