首页 > vue.js对事件添加的dom怎么渲染?

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

操作描述:点击按钮,向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试试?

【热门文章】
【热门文章】