sniggering_deus
@sniggering_deus
Dance Gavin Dance - Prisoner

Как вставить div с внутренними div'aми через vue.js?

Мне нужно вставить заранее заготовленный блок на страницу через Vue.js.

Это выглядит примерно так:

<div class="post-autor">
<div class="postbody-user__avatar ML4 FL3"></div>
<ul class="postbody-user__info">
<li class="postbody-user__info-box"></li>	
<li class="postbody-user__info-box"></li>	
<li class="postbody-user__info-box"></li>
<li class="postbody-user__info-box"></li>	
</ul>	
</div>


Попытка использовать такой скрипт:

var app = new Vue({
  el: '#app',
  data: {
    vueHtml: '<div class="post-autor">
<div class="postbody-user__avatar ML4 FL3"></div>
<ul class="postbody-user__info">
<li class="postbody-user__info-box"></li>	
<li class="postbody-user__info-box"></li>	
<li class="postbody-user__info-box"></li>
<li class="postbody-user__info-box"></li>	
</ul>	
</div>'
  },
})


Увенчалась провалом. Получаю ошибку в консоли и никаких результатов вставки...

А так работает:

var app = new Vue({
  el: '#app',
  data: {
    vueHtml: '<li class="postbody-user__info-box"></li>'
  },
})


Ну т.е если всего один блок. Как это решить?
  • Вопрос задан
  • 1024 просмотра
Решения вопроса 3
@pavelbazhan
Попробуйте вместо обычных кавычек использовать обратные кавычки, на обычной клавиатуре они находятся на букве Ё. Вот так:
vueHtml: `<div class="post-autor">
  <div class="postbody-user__avatar ML4 FL3"></div>
    <ul class="postbody-user__info">
      <li class="postbody-user__info-box"></li>	
      <li class="postbody-user__info-box"></li>	
      <li class="postbody-user__info-box"></li>
      <li class="postbody-user__info-box"></li>	
    </ul>	
  </div>`
Ответ написан
@hurgadan
Вы просто у гугла не то спрашивали :)

https://jsfiddle.net/hurgadan/s42b85nm/1/
Ответ написан
@ArtyomPLAY
Люблю Vue, React и все что с этим связано.
Зачем использовать vue не по назначению?
Создаете отдельный компонент, в который кладете этот html. После просто импортируете сам компонент куда и как угодно.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы