Опора не обновляется в дочернем компоненте при изменении значения

Question

В моем App компоненте (родительском) у меня есть:

<div class="bg-dark text-white text-center p-3 content">
        <div class="form-group">
            <input class="form-control" v-model="dogBreed" />
        </div>
        <my-child-comp greeting="Hello from parent" v-bind:dog-breed="dogBreed" />
    </div>

...
data() {
        return {
            dogBreed: "Pit Bull"
        }
    },

И в дочернем представлении:

<template>
    <div class="bg-primary text-white text-center m-2 p-3 content">
        <h3>Dog: {{ dog }}</h3> 
    </div>
</template>

...
props: ["greeting", "dogBreed"], 
    data() {
        return {
            dog: this.dogBreed, 
        }
    },

Я получаю начальное значение для dogBreed из родительский компонент внутри дочернего компонента, но когда я изменяю значение поля ввода, такое же изменение не отражается, почему?

Answer 1

1. Пропорка в родительском компоненте не названа должным образом, это должно быть точное имя реквизита - dogBreed, которое вы использовали в дочернем компоненте

<div class="bg-dark text-white text-center p-3 content">
        <div class="form-group">
            <input class="form-control" v-model="dogBreed" />
        </div>
        <my-child-comp greeting="Hello from parent" v-bind:dogBreed="dogBreed" />
    </div>

...
data() {
        return {
            dogBreed: "Pit Bull"
        }
    },

Ваш дочерний компонент может оставаться тем же самым, но использовать вычисленный вместо данных. Одноименное имя не вызовет каких-либо вычислительных проблем, а использование вычисленных вместо данных должно исправить динамический характер вашего кода.

<template>
    <div class="bg-primary text-white text-center m-2 p-3 content">
        <h3>Dog: {{ dog }}</h3> 
    </div>
</template>

    ...
 props: ["greeting", "dogBreed"], 
 computed: {
      dog(){
        return this.dogBreed
      }
   },

Если вы все же хотите использовать dog-breed затем вы должны переименовать свойство в вашем дочернем компоненте в dog-breed, прежде чем связывать его в своем родительском компоненте.