Создание массива

Теперь давайте поместим наш контейнер в массив а также добавим в контейнер кнопку удаления.

<div data-pages="array" style="border: 1px solid red; padding: 10px;">

<!-- создали массив pages и поместили в него два одинаковых контейнера page --> 

    <div data-page="container" style="border: 1px solid green"> 

        <p data-page-paragraf="text" data-page-my_class="class">текст<p>
        <button data-page-btn_click="click">Кнопка</button> 

        <button data-page-remove="click">Удалить</button> 
         <!-- добавили кнопку удаления для контейнера page и поместили в нее свойство "remove" -->

    </div>
    <div data-page="container" style="border: 1px solid green"> 

        <p data-page-paragraf="text" data-page-my_class="class">текст<p>
        <button data-page-btn_click="click">Кнопка</button> 

        <button data-page-remove="click">Удалить</button>

    </div>

</div>        

Теперь изменим описание приложения:

var StateMap = {

  pages: { //теперь компонент называется pages 

    container: "page", //названия контейнеров не поменялись


    props: ["paragraf", "my_class", "btn_click", "remove"], //добавили свойство "remove"
    methods: {                          

        btn_click: function(){                       

            console.log(this);                                                          
            this.parent.props.paragraf.setProp("Новый текст");                              
            this.parent.props.my_class.setProp("new_class");

        },
        remove: function(){  //обработчик события для свойства "remove"

            this.parent.remove(); //получаем доступ к контейнеру из свойства, а затем удаляем контейнер 

        }
    }           
 }
}

Итак после того как мы поместили контейнер в массив pages, компонент принял название массива, а названия для контейнеров остались прежними. Также теперь контейнер можно удалить т. к. он находится в массиве.