vue.js对事件添加的dom怎么渲染？

Question

操作描述：点击按钮，向table里添加一条tr并渲染select class=a下面的option
出现的问题：点击添加的dom第一条可以渲染，第二条没被vue解析，而是把标签显示出来了

代码:

var table = $('table').find('tbody')
var dom = '<tr><td><select class="a"><option v-for="item in items">{{item.title}}</option></select></td></tr>'
btn.on('click',function(){
    table.append(dom);
    vmcode('.a')
})
function vmcode(dom){
     var data = {
     itmes:[]
     }
      var vm = new Vue({
        el:dom,
        data:data
    })
}

如果换了class名就可以，要怎么解决呢？

Answer 1

暂时把JQ的思路放在一边

function vmcode(dom){
     var data = {
     itmes:[]
     }
      var vm = new Vue({
        el:dom,
        data:data
    })
}

你这个封包，每次点击一下，都new vue，其实这个只需要初始化一次就够了

Answer 2

你这个思路非常的“不vue”，完全是命令式操作，既然选择了用vue，那要不要换个思路，thinking in vue试试？

Answer 3

既然用了vue, 就用vue的思维去写代码, 不要再把jq的思维带进去

vue是面向数据, 用数据去驱动dom.

如果改变不了jq的思维, 就不要去用框架了...

否则写出来的代码就不伦不类的...

Answer 4

vue 的 el 是 document.querySelector(el); 而你的 .a 有两个的时候，只能 mount 到第一个

我觉得你可以换个思路，从数据出发。