Не удается получить доступ к элементу DOM в компоненте Vue при использовании универсального JavaScript

Question

Я пытаюсь динамически обновлять данные с Vue.compnent, используя способ jQuery в проекте Webpack.Ниже приведен фрагмент кода.

<template>
    <div id="container">
        <slot>show string!!</slot>
        <div id="s_container"></div>
    </div>
</template>

<script>
export default {

}

const items = [
  'thingie',
  'anotehr thingie',
  'lots of stuff',
  'yadda yadda'
]

function listOfStuff () {
  let full_list = ''

  for (let i = 0; i < items.length; i++) {
    full_list = full_list + '<li>{{items[i]}}</li>'
  }
  //  const contain = document.querySelector('#s_container')
  const contain = this.$el.querySelector('#s_container')
  if (contain != null) { 
      contain.innerHTML = '<ul ${full_list} </ul>' 
  } else {
     console.log('contain is null');
  }
}
listOfStuff()
</script>

, но эта переменная всегда не может получить элемент #s_container.Как я могу получить это правильно извне сценария Java?Спасибо.

Answer 1

Сначала вам нужно связать массив элементов в функцию возврата данных, например:

export default {
 data()
  return {
   items: ['thingie', 'yadda yadda']
  }
}

Затем вы можете использовать цикл v-for для отображения этого массива в HTML li.Вот так в вашем шаблоне:

<template>
  <div>
   <ul>
     <li v-for="(item, index) in items" :key=index>
      {{ item }}
     </li>
   </ul>
  </div>
</template>

Таким образом, вы можете отобразить простой список, используя vue.js, если вам нужна дополнительная информация об этой функции, прочитайте эту часть документации: https://vuejs.org/v2/guide/list.html

Хорошего дня!