Vue-js как вставить в index.html сгенерированный html компонент?

Question

[beduin01]

Ситуация такая.
Есть приложение на Vue-JS
Есть картографический компонент на Leaflet с обраоткой события. Внутри обработчика идет обращение к серверу и получение данных:

map.on('draw:created', function (e) {
...

   Vue.http.post('/dbdata', DataBody).then((response) => {
      userContent.rasters_list = response; // putting JSON answer to Component data in userContent
      console.log("Vue.rasters_list:");
      console.log(userContent.rasters_list);

Мне нужно отобразить полученные данные в виде списка.
Проблема в том, что если генерацию списка делать в index.html, то данных при старте там не будет. Т.е. мне нужно этот список генерировать по событию. Если его генерировать по событию, то очевидно, что нужно в обработчике выше впихнуть, что-то вроде:

<ul v-for="img in rasters_list">
                            {{img.id}}
                            <input type="checkbox" /> Layer 5 <br>
                          <ul>

Только вот совершенно не понятно, как сделать так, чтобы это фигня отобразилась в нужном месте в index.html

Как это делается? Нужно чтобы оно отобразилось как только данные пришли с сервера.

Answer 1

[aber]

Воткните в нужном месте в хтмл компонент, у которого в темплейте отображение регулируется в духе
v-if="!!rasters_list.length"
А сам список передать в этот компонент из родительского через props