如何在Vue.js中使用v-for将数组全部项追加渲染到div容器中

问题点梳理 #

• 数组取值错误：this.chocs是存储所有条目的数组，本身不存在title属性，直接取值this.chocs.title只能得到undefined
• 重复ID不符合HTML规范：原代码给v-for循环生成的所有元素设置了相同idfox，页面id要求唯一，因此jQuery选择器$("#fox")只会匹配到第一个生成的元素，无法作用到所有节点
• 混用jQuery手动操作DOM不符合Vue数据驱动的设计逻辑，容易出现视图和数据不同步的问题

推荐实现方案（纯Vue，无需jQuery） #

利用Vue的响应式特性，直接通过v-for遍历数组渲染所有条目，无需手动操作DOM：

JavaScript代码

new Vue({
  el: "#app",
  data: () => ({
    chocs:[{"title":'a man tale'}, {"title":'a boy tale'},{"title":'a mermaid tale'},{"title":'a dog tale'}],
    // 控制列表是否展示的开关
    showChocs: false
  }),
  methods: {
    handleTileClick: function(){
      this.showChocs = true
    }
  }
});

HTML代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h2>Todos:</h2>
  <button @click="handleTileClick">Click Me</button>
  <div id="fox">
    <div v-for="(choc, index) in chocs" :key="index" v-if="showChocs">
      data here: {{ choc.title }}
    </div>
  </div>
</div>

兼容jQuery逻辑的修改方案 #

如果需要保留原有的jQuery追加逻辑，修改如下即可实现展示所有条目的需求：

JavaScript代码

new Vue({
  el: "#app",
  data: () => ({
    chocs:[{"title":'a man tale'}, {"title":'a boy tale'},{"title":'a mermaid tale'},{"title":'a dog tale'}]  
  }),
  methods: {
    handleTileClick: function(){
      let html = ''
      // 遍历数组拼接所有条目的HTML片段
      this.chocs.forEach(item => {
        html += `<div class="popover-dialog">data here: ${item.title}</div>`
      })
      $("#fox").append(html)
    }
  }
});

HTML代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h2>Todos:</h2>
  <button @click="handleTileClick">Click Me</button>
  <!-- 把id为fox的容器和v-for拆分，避免重复id -->
  <div id="fox"></div>
</div>

注意：原代码追加的元素使用了固定idpopover-dialog，多次点击会导致id重复，建议改为class标识。

内容的提问来源于stack exchange，提问作者Vzupo