如何向内容动态添加元素？下面的例子:
<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没有看到新的元素.
Update:
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绑定不会发生在插值HTML上.你需要Vue视为模板的东西，比如a partial.然而，Vue只对部分应用绑定一次；您不能返回并更改模板文本，然后将其重新绑定.因此，每次模板文本更改时，都必须创建一个新的分部.
HTML中有一个<partial>标记/元素，它接受一个变量名，因此过程如下:
每次有变化时注册新的东西有点可怕，所以如果可能的话，最好使用一个具有更 struct 化模板的组件，但是如果你真的需要完全动态的HTML绑定，它可以工作.
下面的例子从一条消息开始，根据你的过滤器链接，两秒钟后更改message.
您可以只使用message作为注册部分的名称，但需要一个在注册后返回该名称的计算机，否则它会在注册名称之前try 呈现.
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>