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>

像魅力一样！

Answer 3

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

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

3 个答案: