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

Question

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

原文由 Darwin Luague 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 上查看这个有效的 Fiddle：http: //jsfiddle.net/chrislandeza/syewmx4e/

更新

$compile 已在 Vue 2.x 中删除

我见过有人建议 Vue.compile 或

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

但是那些 2 的行为不像旧的 $compile 。

原文由 Chris Landeza 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

对于 Vue 2.x，文档中引用了新的解决方案： https ://v2.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>

奇迹般有效！

原文由 arzhed 发布，翻译遵循 CC BY-SA 4.0 许可协议