操作描述:点击按钮,向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名就可以,要怎么解决呢?
vue 的 el 是 document.querySelector(el);
而你的 .a 有两个的时候,只能 mount 到第一个
我觉得你可以换个思路,从数据出发。
既然用了vue, 就用vue的思维去写代码, 不要再把jq的思维带进去
vue是面向数据, 用数据去驱动dom.
如果改变不了jq的思维, 就不要去用框架了...
否则写出来的代码就不伦不类的...
暂时把JQ的思路放在一边
function vmcode(dom){
var data = {
itmes:[]
}
var vm = new Vue({
el:dom,
data:data
})
}
你这个封包,每次点击一下,都new vue,其实这个只需要初始化一次就够了
你这个思路非常的“不vue”,完全是命令式操作,既然选择了用vue
,那要不要换个思路,thinking in vue试试?