如何使Vue js指令在附加的html元素中工作

Question

我在一个附加的html元素中添加了一个Vue指令,比如v-on指令,但它不适用于我的结尾.基本上我想知道jquery中等效的.on().

Answer 1

"Vue.js编译在您实例化/挂载根实例时发生.它不会检测到正在注入的新DOM,除非它是指令的结果(例如v-repeat,v-partial将动态创建新的DOM片段)." https://github.com/vuejs/Discussion/issues/77

你必须像这样编译你新添加的元素:

HTML:

<div id="app">
    <button v-on="click: addNewElement()">Add Element</button> 
    <br />
</div>

JavaScript的

new Vue({
    el: '#app',
    data: {
        sampleElement: '<button v-on="click: test()">Test</button>'
    },
    methods:{
        addNewElement: function(){

           var element = $('#app').append(this.sampleElement);
           /* compile the new content so that vue can read it */
           this.$compile(element.get(0));
        },
        test: function(){
           alert('Test');
        }
    }
});

在Firefox上 看到这个工作小提琴:http ://jsfiddle.net/chrislandeza/syewmx4e/

更新

已在Vue 2.x上删除$ compile

我见过人们建议使用Vue.compile或

var tmp = Vue.extend({ 
    template: 'Content'
})
new tmp().$mount(' id or refs ')

但是那些2的行为与旧的$ compile不同.

Answer 2

对于Vue 2.x,新解决方案在doc:https://vuejs.org/v2/api/#vm-mount(参见'示例')中引用.

自定义示例:

var MyComponent = Vue.extend({
  template: '<div v-on:click="world">Hello!</div>',
  methods : {
    world : function() {
      console.log('world')
    }
  }
})
 
var component = new MyComponent().$mount()
document.getElementById('app').appendChild(component.$el)

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.3.4/vue.min.js"></script>

<div id="app"></div>

奇迹般有效!