KitaXvost
@KitaXvost

Как сделать рендеринг HTML-блока с помощью JavaScript?

Суть кода в динамически создаваемых дивах одного под другим, данные в которых будут разными (в примере - одинаковые).

Не могу разобраться в двух ошибках (указаны в комментариях к коду):

1. при получении ID блока (tops0, tops1 и т.д.)
2. при выводе данных из axios (top.name)

Подскажите, как правильно это сделать?
И какими паттернами вы пользуетесь в таких случаях?

<template>
  <div>
    <div id="tops0"></div>
    <div id="tops1"></div>
    <div id="tops2"></div>
    <button @click="getTops()">лучшие</button>
  </div>
</template>

<script>
import axios from 'axios'
export default {
   data() {
     return {
     count: 0,
     tops: [],
            }
        },

mounted()
{
let vm = this;
vm.getTops();
vm.rendering();
},

methods: {
  rendering() {
     let vm = this
     var count = count+1;
       // поиск по такому ID выводит в консоли: 
      // Cannot set property 'innerHTML' of null"
     document.getElementById('tops'+count).innerHTML =
     +'<div v-for="(top, index) in tops">'+
     +'<div v-if="(index > -1 & index < 2)">'+
     +top.name+  //возвращает Nan
     +'</div></div>';
               },

    getTops() {
      let vm = this
      axios.get('/api/tops')
     .then(function(response) {
      vm.tops = response.data
      vm.rendering();
                })
             },
},
  }
</script>
  • Вопрос задан
  • 81 просмотр
Пригласить эксперта
Ответы на вопрос 1
Robur
@Robur
Знаю больше чем это необходимо
рендеринг html в vue.js делается совсем не так. Вы уж определитесь вы хотите пользоваться фреймворком или не хотите.
Если не хотите - то выкиньте все это, если хотите - то прочитайте доку, примеры, и все такое.
хотя судя по
var count = count+1;
сначала надо изучить js.

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
12 авг. 2020, в 10:11
200 руб./за проект
12 авг. 2020, в 09:40
1000 руб./за проект
12 авг. 2020, в 08:19
5000 руб./за проект