1 Тема від shtyegor

  • shtyegor
  • Користувач
  • Поза форумом
  • Звідки: Луцьк
  • Дата реєстрації: 08.12.2016
  • Повідомлень: 50
    • Репутація: 7

Тема: Vue.js проблеми з v-model

не можу зрозуміти як надати в v-model дочірнього шаблона data з шаблона який викликає дочірній

   Vue.component('question-textarea', {
        props: {
            'title': String, 
            'plch': String, 
            'rows': {
                type: Number,
                default: 1
            }, 
            'model': String
        },
        template:`
            <div class="question">
                <label>{{ title }}</label>
                <div class="textarea">
                    <label>{{ plch }}</label>
                    <textarea :rows="rows" v-model="model"></textarea>
                </div>
            </div>
        `
    });
    Vue.component('brief-dev', {
        data: function(){
            return {
                form1: {
                    about: '',
                    pozytsiya: '',
                    meta: '',
                },
                form2: {
                    audytoriya: '',
                    konkurenty: '',
                    vpodobannya: '',
                },
                form3: {
                    optymizatsiya: '',
                    obraz: '',
                    kolor: '',
                }
                
            }    
        },
        computed: {
            isScrenn1Fullness: function(){
                return (String(this.form1.about).length > 4) && (String(this.form1.pozytsiya).length > 4) && (String(this.form1.meta).length > 4)
            },
            isScrenn2Fullness: function(){
                return (String(this.form2.audytoriya).length > 4) && (String(this.form2.konkurenty).length > 4) && (String(this.form2.vpodobannya).length > 4)
            },
            isScrenn3Fullness: function(){
                return (String(this.form3.optymizatsiya).length > 4) && (String(this.form3.obraz).length > 4) && (String(this.form3.kolor).length > 4)
            }
        },
        template:`
        <div id="vue-fullpage">
            <div class="sec-wrap">
                <brief-menu></brief-menu>    
            </div>
            <div class="sec-wrap">
                <brief-first type="розробку сайту"></brief-first>
            </div>
            <div class="sec-wrap">
                <div class="brief-sec">
                    <div class="content">
                        <form action="/">
                            <question-textarea 
                                title="Коротко про себе та свою компанію" 
                                plch="галузь бізнесу, основні послуги, сфера діяльності..." 
                                :model="this.form1.about">
                            </question-textarea>
                            <question-textarea 
                                title="Позиціонування продукту / компанії" 
                                plch="основні конкурентні переваги рекламованого товару або послуги, іміджеві емоції" 
                                :model="this.form1.pozytsiya">
                            </question-textarea>
                            <question-textarea 
                                title="Мета створення сайту" 
                                plch="розвиток проекту, просування конкретних послуг, продажі через інтернет..." 
                                :model="this.form1.meta">
                            </question-textarea>
                        </form>
                        <div class="btn">
                            <button class="next-step-btn" v-bind:class="{active: isScrenn1Fullness}">Далі</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
            
        `
    });

вдасне помилка
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "model"

found in

---> <QuestionTextarea>
       <BriefDev>
         <Root>

2 Відповідь від ostap34PHP

  • Дата реєстрації: 27.01.2016
  • Повідомлень: 771
    • Репутація: 456

Re: Vue.js проблеми з v-model

https://stackoverflow.com/questions/398 … s-vue-warn

Подякували: shtyegor, leofun012

ostap34PHP вебсайт

3 Відповідь від shtyegor Востаннє редагувалося shtyegor (14.01.2019 14:17:40)

  • shtyegor
  • Користувач
  • Поза форумом
  • Звідки: Луцьк
  • Дата реєстрації: 08.12.2016
  • Повідомлень: 50
    • Репутація: 7

Re: Vue.js проблеми з v-model

Я розібрався)
Працює ось так

    Vue.component('question-textarea', {
        props: {
            'title': String, 
            'plch': String, 
            'rows': {
                type: String,
                default: '1'
            },
            'model': String
        },
        data: function() { 
            return { 
                val: ''
            } 
        },
        methods: {
            returnVal: function() {
// #2  --- викликаємо event changeTextarea в цього елемента і передаємо йому дані
                this.$emit('changeTextarea', 
                    { 
                        model: this.model,
                        val: this.val 
                    }
                );
            }
        },
        template:`
            <div class="question">
                <label>{{ title }}</label>
                <div class="textarea">
                    <label v-html="plch"></label>
                    <textarea :rows="rows" v-model="val" 
// #1  --- при вводі літер викликаємо функцію returnVal
v-on:input="returnVal">
                     </textarea>
                </div>
            </div>
        `
    });
    Vue.component('brief-dev', {
        data: function(){
            return {
                form1: {
                    about: '1',
                    pozytsiya: '2',
                    meta: '3',
                }
            }    
        },
        methods: {
// #4  ---  получаємо дані і змінюємо дані в батьківському елементі на потрібні
            setVal: function(res) {
                var m = res.model.split('.');
                this[m[0]][m[1]] = res.val;
            }
        },
        template:`
            <div id="vue-fullpage">
                <div class="sec-wrap fp-section fp-table">
                    <div class="brief-sec">
                        <div class="content">
                            <form action="/">
                                <question-textarea 
// #3  ---  відловлюємо event changeTextarea і передаємо дані в функцію setVal
                                    @changeTextarea="setVal"
                                    model="form1.about"
                                    title="Коротко про себе та свою компанію" 
                                    plch="галузь бізнесу, основні послуги, сфера діяльності..." 
                                >
                                </question-textarea>
                            </form>
                            <div class="btn">
                                <button class="next-step-btn" v-bind:class="{active: isForm1Fullness}">Далі</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        `
    });
Подякували: ostap34PHP1

4 Відповідь від shtyegor

  • shtyegor
  • Користувач
  • Поза форумом
  • Звідки: Луцьк
  • Дата реєстрації: 08.12.2016
  • Повідомлень: 50
    • Репутація: 7

Re: Vue.js проблеми з v-model

Я ще десь читав що є ще якийсь спосіб (не vuex)
Якщо хтось знає його, напишіть, буду дуже вдячний

5 Відповідь від shtyegor

  • shtyegor
  • Користувач
  • Поза форумом
  • Звідки: Луцьк
  • Дата реєстрації: 08.12.2016
  • Повідомлень: 50
    • Репутація: 7

Re: Vue.js проблеми з v-model

Я ще десь читав що є ще якийсь спосіб (не vuex)
Якщо хтось знає його, напишіть, буду дуже вдячний