使用通用javascript时无法访问Vue组件中的DOM元素

Question

我正在尝试通过在 Webpack 项目上使用 jQuery 方式动态更新来自 Vue.compnent 的数据。以下是代码sn-p。

<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

首先你需要将你的 items 数组绑定到一个数据返回函数中，如下所示：

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

祝你有美好的一天！