Vue.js 2.0 this.$compile [英] Vue.js 2.0 this.$compile

问题描述

如何在组件方法中将 HTML 字符串编译为模板?这在 Vue 1 中是可能的，例如 jsfiddle

new Vue({el: '#app',数据: {sampleElement: '<button v-on="click: test()">Test</button>'},方法:{添加新元素:函数(){var element = $('#app').append(this.sampleElement);/* 编译新内容以便 vue 可以读取 */this.$compile(element.get(0));},测试:函数(){警报('测试');}}});

你如何在 Vue 2 中做到这一点?

解决方案

这不再可能，但是，Vue 2 是数据驱动的，因此您不应该尝试手动影响 DOM完全相反，您应该将元素绑定到视图模型中的基础数据.考虑到这一点，您的示例需要重新编写.首先，让你的元素成为component:

Vue.component('my-button', {模板:'<button v-on:click="test()">{{text}}</button>',道具:['文本']，方法: {测试() {警报('测试');}}});

然后您可以创建主视图模型并使用 v-for 添加按钮组件:

标记:

  添加元素<my-button v-for="button in button" :text="button"></my-button>

查看模型:

new Vue({el: '#app',方法: {添加新元素:函数(){this.buttons.push('测试');}},数据: {纽扣: []}});

在本例中，我们将按钮推送到一个数组，然后该数组将显示在页面上，而不是手动将它们附加到模板中.

这是 JSFiddle:http://jsfiddle.net/10q9je5a/

如果你想要更通用的东西，那么你可以简单地创建一个 不同组件 的数组，并使用 :is 让 Vue 知道要渲染哪个组件:

标记:

<button v-on:click="addNewElement()">添加元素</button><div :is="element.component" v-for="元素中的元素" v-bind="element.props"></div>

查看模型:

new Vue({el: '#app',方法: {添加新元素:函数(){this.elements.push({component: 'my-button', props: {text: 'Test'}});}},数据: {元素:[]}});

这是 JSFiddle:http://jsfiddle.net/cxo5eto0/

How do can you compile a HTML string to template within a component method? This was possible in Vue 1 like in this jsfiddle

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');
        }
    }
});

How can you do this in Vue 2?

解决方案

This is no longer possible, however, Vue 2 is data driven, so you shouldn't be trying to affect the DOM manually at all, instead you should bind elements to the underlying data in your view model. With that in mind your example will need to be re-written. Firstly, start by making your element a component:

Vue.component('my-button', {
  template: '<button v-on:click="test()">{{text}}</button>',
  props: ['text'],
  methods: {
    test() {
      alert('Test');
    }
  }
});

Then you can create your main view model and add your button component using a v-for:

Markup:

  <button v-on:click="addNewElement()">Add Element</button>
  <my-button v-for="button in buttons" :text="button"></my-button>

View model:

new Vue({
  el: '#app',
  methods: {
    addNewElement: function() {
       this.buttons.push('Test');
    }
  },
  data: {
    buttons: []
  }
});

In this example we are pushing buttons to an array that will then be displayed on the page, rather than manually appending them to the template.

Here's the JSFiddle: http://jsfiddle.net/10q9je5a/

If you want something more generic, then you can simply create an array of different components and use :is to let Vue know which component to render:

Markup:

<div id="app">
  <button v-on:click="addNewElement()">Add Element</button>
  <div :is="element.component" v-for="element in elements" v-bind="element.props"></div>
</div>

View Model:

new Vue({
  el: '#app',
  methods: {
    addNewElement: function() {
       this.elements.push({component: 'my-button', props: {text: 'Test'}});
    }
  },
  data: {
    elements: []
  }
});

Here's the JSFiddle for that: http://jsfiddle.net/cxo5eto0/

这篇关于Vue.js 2.0 this.$compile的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！