javascript - vuejs中动态增加的html,如何绑定事件？

Question

新添加一个input元素，给input元素绑定事件,这样设置并没有生效。

var newObj = document.createElement('input');
newObj.type="text";
newObj.setAttribute("v-on:keyup.enter","blurTodo"); 
           
.....

element.appendChild(newObj);

请问vuejs中动态增加的html，如何绑定事件？

Answer 1

竟然用了vue就没有必要还需要手动操作DOM去动态添加HTML。所有你要的，都可以直接使用vue完成。你的思路还没有转过来。讲讲看你的需求，看看应该怎么用vue的思路解决

更新：
我写的demo：https://jsfiddle.net/ygjack/63ux8v10/

Answer 2

绑定时间是在 ready阶段就完成了，这时候你再去appendChild，当然没用了。。。 这种操作一般可以用 v-if 或者 v-show 来实现的吧。 0.0

Answer 3

这个是Vue.js 2的实现，下面是代码：

    <p id="app2"></p>
    
    <script type="text/javascript">
        var NewDom = Vue.extend({
           template: "<p><h1>{{msg}}</h1><br /><input v-model='msg' @click='click' /></p>",
           data: function () {
              return {
                 msg: 'Walter'
              }
           },
           methods: {
              click: function () {
                 this.msg = "You click me!";
              }
           }
        });
        new NewDom().$mount('#app2');
    </script>