Vue: объявленные реквизиты в компоненте не определены

Question

Я провел два дня, пытаясь решить эту проблему самостоятельно, но не смог заставить ее работать.В основном я объявил все свои реквизиты в родительском компоненте, но по какой-то причине они вообще не отображаются.

Компонент

let addFilter = {
    props: ['newFilterName'],
    template:  `<div class="row">
                    <div class="field-options">{{ newFilterName }}</div>
                </div>`,
};

Экземпляр

let filterManager = new Vue({
    el: '#filter-manager',
    components: {
        'add-filter': addFilter
    },
    data: {
        newFilterName: 'Test1234'
    }
});

HTML

<div id="filter-manager" v-show="visible">
    <div class="body">
        <add-filter></add-filter>
     </div>
</div>

Answer 1

вам нужно передать данные из родительского в компонент

<div id="filter-manager" v-show="visible">
    <div class="body">
        <add-filter :new-filter-name="newFilterName" ></add-filter>
     </div>
</div>

Для ясности :new-filter-name - это свойство дочернего компонента, а правая сторона "newFilterName" - это свойство данных, которое вы определилив родительском.Просто называть их так же ничего не значит.Вам нужно назначение при создании экземпляра компонента.