Не удается манипулировать свойством данных как объектом, если оно передается от родительского к дочернему компоненту в VueJs - PullRequest
Новая
       5

Не удается манипулировать свойством данных как объектом, если оно передается от родительского к дочернему компоненту в VueJs

1 голос
/ 26 октября 2019

Я пытался получить доступ к свойству данных переданного объекта из родительского компонента в дочерний компонент, но vue выдает исключение, что он не может получить к ним доступ. Этот мой родительский компонент 

<app-full-name v-model="fullname"></app-full-name>
<script>
export default {
        components:{
            appFullName: FullName
        },
        data() {
            return {
                fullname: {
                  f:'Bassem',
                  l: 'Samir'
                },

            }
        }
    }
</script>

в дочернем компоненте 

<script>
export default {
    props:['value'],
    methods: {
        changeName(isFirst, event){
            let name = "";
            if(isFirst){
                name = this.value.f+" ";
            }
            else{
                name = this.value.l+" "+this.value.l;
            }
        },  
    },
}
</script>

Vuejs выдает ошибку, что свойство f не определено в дочернем компоненте. Как я могу это исправить?

1 Ответ

0 голосов
/ 26 октября 2019

Вы получаете undefined, потому что вы получаете доступ к не определенному значению пропа. Если вы хотите поделиться данными между parent-> child, вы должны использовать: 

//Parent file
<app-full-name your-data="fullname"></app-full-name>

//Child file (app-full-name)
...
props:['yourData']

Таким образом, вы отправляете своему ребенку «your-data» в качестве реквизита. Помните, что вы не можете изменить это значение в дочернем элементе, если вам нужно обновить его, вы должны сделать это с помощью событий (emit).

Дочерний процесс отправляет событие (emit it), а родитель прослушиваетчтобы сделать изменения в данных. Что-то вроде: 

//child
this.$emit('changeData')

//parent
@changeData="changeData"
function changeData(){ //the changes here }

Вы можете прочитать об этом больше, здесь

Надеюсь, это поможет!

...