vue.js - Vue.js 中的动态 html 元素

Question

如何向内容动态添加元素？示例如下:

<template>
    {{{ message | hashTags }}}
</template>

<script>
    export default {
        ...

        filters: {
            hashTags: function(value) {
                // Replace hash tags with links
                return value.replace(/#(\S*)/g, '<a v-on:click="someAction()">#$1</a>')
            }
        }
    }
</script>

问题是，如果我按下链接，则不会触发任何操作。 Vue 看不到新元素。

Answer 1

更新:基于this answer ，你可以在 Vue 2 中做一个类似的动态模板组件。你实际上可以在 computed 中设置组件规范。部分并使用 :is 绑定(bind)它

var v = new Vue({
  el: '#vue',
  data: {
    message: 'hi #linky'
  },
  computed: {
    dynamicComponent: function() {
      return {
        template: `<div>${this.hashTags(this.message)}</div>`,
        methods: {
          someAction() {
            console.log("Action!");
          }
        }
      }
    }
  },
  methods: {
    hashTags: function(value) {
      // Replace hash tags with links
      return value.replace(/#(\S*)/g, '<a v-on:click="someAction">#$1</a>')
    }
  }
});

setTimeout(() => {
  v.message = 'another #thing';
}, 2000);

<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<div id="vue">
  <component :is="dynamicComponent" />
</div>

Vue 绑定(bind)不会发生在插入的 HTML 上。你需要一些 Vue 视为模板的东西，比如 a partial .但是，Vue 只将绑定(bind)应用到部分一次；您不能返回并更改模板文本并重新绑定(bind)。因此每次模板文本更改时，您都必须创建一个新的部分。

有一个<partial>您可以放入 HTML 中的标记/元素，它接受一个变量名，因此过程是:

• 模板 HTML 更改
• 为新模板 HTML 注册新的部分名称
• 更新名称变量以便呈现新的部分

每次发生变化时都注册新的东西有点可怕，所以如果可能的话，最好使用具有更结构化模板的组件，但如果你真的需要带有绑定(bind)的完全动态的 HTML，它就可以工作。

下面的示例从一条消息开始，根据您的过滤器进行链接，两秒钟后，更改为 message .

你可以只使用message作为注册部分的名称，但您需要一个在注册后返回该名称的计算，否则它会在注册名称之前尝试呈现。

var v = new Vue({
  el: 'body',
  data: {
    message: 'hi #linky'
  },
  computed: {
    partialName: function() {
      Vue.partial(this.message, this.hashTags(this.message));
      return this.message;
    }
  },
  methods: {
    someAction: function() {
      console.log('Action!');
    },
    hashTags: function(value) {
      // Replace hash tags with links
      return value.replace(/#(\S*)/g, '<a v-on:click="someAction()">#$1</a>')
    }
  }
});

setTimeout(() => {
  v.$set('message', 'another #thing');
}, 2000);

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/1.0.26/vue.min.js"></script>
<partial :name="partialName"></partial>