Как создать компонент с новыми данными и параметрами или установить новые методы в VUE?

Question

Как создать компонент с новыми данными и параметрами или установить новые методы в VUE? Почему это не работает? Как установить новые данные itemList?

    <dropdown-sort-list id="dropdown-sort-list"></dropdown-sort-list>

    <script>
        let dropdown = Vue.component('dropdown-sort-list', {

            data: function () {
                return {
                    itemList: [{name: 1111111111}],
                }
            },
            template: `
                            <a class="dropdown-item dot" href="#" v-bind:key="item.name" v-for="(item, index) in itemList">{{item.name}}</a>
                  `
        });

        var dropdownEx = new dropdown({
            el: "#dropdown-sort-list",
            data: {
                itemList: [{name: 2222222222}],
            },
        });

    </script>

Answer 1

Ваш dropdown-sort-list рендерит несколько корневых узлов, что недопустимо в Vue.js. Вы должны визуализировать только 1 корневой узел на компонент, добавление оболочки для вашего компонента должно заставить его работать:

<div>
  <a class="dropdown-item dot" href="#" v-bind:key="item.name" v-for="(item, index) in itemList">{{item.name}}</a>
</div>

Примечание: Функциональные компоненты не имеют этого ограничения.