如何将Vue.js数据绑定到动态追加的div元素中

问题原因 #

你直接用jQuery动态插入的带{{}}模板语法的字符串不会被Vue识别：Vue的模板编译仅在实例初始化阶段对已挂载DOM内的模板进行解析处理，运行时动态插入的未编译模板字符串不会被自动处理，所以{{}}表达式不会生效。

解决方案1：推荐 数据驱动实现（符合Vue设计思想） #

完全不需要用jQuery操作DOM，通过控制响应式变量决定元素是否渲染，天然支持响应式绑定，全程使用原生div实现：

修改后HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <h2>Todos:</h2>
 <button v-on:click="handleTileClick">
 Click Me
 </button>
 <div id="fox">
   <!-- 用v-if控制动态元素的显示，直接写模板语法即可生效 -->
   <div v-if="showPopover" id="popover-dialog"> data here {{chocs[0].title}}</div>
 </div>
</div>

修改后JS代码 #

new Vue({
  el: "#app",
  data: {
    chocs:[{"title":'a man tale'},{"title":'a boy tale'}],
    showPopover: false // 控制弹窗是否显示的响应式变量
  },
  methods: {
    handleTileClick: function(){
      alert(this.chocs[0].title);
      this.showPopover = true // 修改变量触发元素渲染，无需操作DOM
    },
  }
})

如果需要点击一次追加一个新的元素而非仅显示一个，可以把v-if换成v-for绑定一个数组，点击时往数组里加元素即可。

解决方案2：必须动态插入DOM场景 手动编译模板 #

如果确实有需求要运行时动态插入DOM，可以使用Vue的手动编译能力实现响应式绑定：

new Vue({
  el: "#app",
  data: {
    chocs:[{"title":'a man tale'},{"title":'a boy tale'}]
  },
  methods: {
    handleTileClick: function(){
      alert(this.chocs[0].title);
      // 创建组件构造器
      const DialogComponent = Vue.extend({
        template: `<div id="popover-dialog"> data here {{chocs[0].title}}</div>`,
        data: () => ({
          chocs: this.chocs // 绑定当前实例的响应式数据
        })
      })
      // 挂载组件生成DOM
      const dialogInstance = new DialogComponent().$mount()
      // 插入到指定容器
      document.getElementById('fox').appendChild(dialogInstance.$el)
    },
  }
})

临时方案（无响应式） #

如果你不需要后续数据更新同步到新增的div里，直接在模板字符串里拼接变量值即可，不需要用{{}}语法：

$("#fox").append(`<div id="popover-dialog"> data here ${this.chocs[0].title}</div>`);

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