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

Question

我在附加的 html 元素中添加了一个 Vue 指令，例如 v-on 指令，但它在我这边不起作用。基本上我想知道 jquery.

中 .on() 的等价物

Answer 1

您需要将html注册为组件模板。

Answer 2

"Vue.js compilation happens when you instantiate/mount the root instance. It doesn't detect new DOM being injected unless it is a result of a directive (e.g. v-repeat, v-partial will dynamically create new DOM fragments)." 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 上看到这个工作 Fiddle ： http://jsfiddle.net/chrislandeza/syewmx4e/

更新

$compile 已在 Vue 2.x

上删除

我看到有人建议 Vue.compile 或

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

但是那两个不像旧的 $compile.

Answer 3

对于 Vue 2.x，文档中引用了新的解决方案：https://vuejs.org/v2/api/#vm-mount（参见 'Example'）。

自定义示例：

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>

很有魅力！

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

How to make Vue js directive working in an appended html element

vue.js